0


uniapp中使用全局样式文件引入的三种方式

如果你想在

uni-app

中全局引入 SCSS 文件(例如

global.scss

),可以通过以下步骤进行配置:

方法一:在

main.js

中引入

  1. main.js 中引入全局样式:你可以在 src/main.js 文件中直接引入 SCSS 文件,这样可以确保在整个应用中都可以使用这些样式。// src/main.jsimport Vue from 'vue';import App from './App.vue';import './styles/global.scss'; // 全局引入 SCSS 文件Vue.config.productionTip = false;new Vue({ render: h => h(App),}).$mount('#app');#### 方法二:在 App.vue 中引入
  2. App.vue 中引入:你也可以在 App.vue 组件的 <style> 标签中引入全局样式:<template> <view> <router-view></router-view> </view></template><script>export default { // 你的 JavaScript 代码}</script><style lang="scss">@import './styles/global.scss'; // 全局引入 SCSS 文件</style>#### 方法三:通过 vue.config.js 配置
  3. 通过 vue.config.js 配置(如果你使用的是 vue-cli):如果你的项目是通过 vue-cli 创建的,还可以在 vue.config.js 中配置全局样式。你可以在 vue.config.js 中添加如下配置:// vue.config.jsconst path = require('path');module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@/styles/global.scss";`, // 全局引入 }, }, },};#### 注意事项
  • global.scss 文件的路径是正确的。

  • 使用全局样式时,请注意可能会导致样式冲突,确保样式的选择器足够具体,以避免影响到其他组件的样式。
  • 如果你使用的是 uni-app 的 HBuilderX 开发工具,确保在项目设置中启用了 SCSS 支持

如果你使用的是

uni-app

的 HBuilderX 开发工具,确保在项目设置中启用了 SCSS 支持。


本文转载自: https://blog.csdn.net/weixin_52584863/article/details/143634418
版权归原作者 上趣工作室 所有, 如有侵权,请联系我们删除。

“uniapp中使用全局样式文件引入的三种方式”的评论:

还没有评论