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

如果你想在 uni-app 中全局引入 SCSS 文件(例如 global.scss),可以通过以下步骤进行配置:

方法一:在 main.js 中引入

  1. main.js 中引入全局样式

    你可以在 src/main.js 文件中直接引入 SCSS 文件,这样可以确保在整个应用中都可以使用这些样式。

    javascript 复制代码
    // src/main.js
    import 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> 标签中引入全局样式:

    javascript 复制代码
    <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 中添加如下配置:

    javascript 复制代码
    // vue.config.js
    const path = require('path');
    
    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            additionalData: `@import "@/styles/global.scss";`, // 全局引入
          },
        },
      },
    };

    注意事项

global.scss 文件的路径是正确的。

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

如果你使用的是 uni-app 的 HBuilderX 开发工具,确保在项目设置中启用了 SCSS 支持。

相关推荐
豆豆10 分钟前
如何选择企业网站模版来搭建网站?
服务器·开发语言·前端·php·软件构建
吃葡萄不图葡萄皮12 分钟前
3D绘制动态爱心Matlab
开发语言·matlab
星晨羽21 分钟前
esayExcel根据模板导出包含图片
java·开发语言·windows
Say Bay To The Bugs22 分钟前
EasyExcel 使用多线程按顺序导出数据
开发语言·excel
机器懒得学习23 分钟前
Python & PyQt5 实现 .his 文件批量转 Excel 工具
开发语言·python·excel
fs哆哆26 分钟前
C#编程:优化【性别和成绩名次】均衡分班
开发语言·c#
可靠百灵鸟30 分钟前
Python 操作 Excel 表格从简单到高级用法
开发语言·python·excel
AI原吾30 分钟前
探索MoviePy:Python视频编辑的瑞士军刀
开发语言·python·音视频·moviepy
数据小小爬虫1 小时前
使用Java爬虫获取淘宝商品类目API返回值
java·开发语言
王者鳜錸1 小时前
UNIAPP发布小程序调用讯飞在线语音合成+实时播报
uni-app