vue定义全局颜色变量

最新推荐文章于 2024-05-24 15:49:34 发布

moon_watermelon

最新推荐文章于 2024-05-24 15:49:34 发布

阅读量8.1k

点赞数

分类专栏： vue实战

本文链接：https://blog.youkuaiyun.com/moon_tang/article/details/97616881

版权

本文介绍了如何在Vue项目中定义全局颜色变量。首先，在style文件夹创建baseColor.scss文件来定义变量。接着，修改build/utils.js文件，将scss加载器设置为'scss'。在组件样式中，设置style的lang属性为scss，并通过@import导入全局变量文件。使用时直接引用这些全局颜色变量即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、新建一个style文件夹，然后里面再新建一个baseColor.scss文件，里面定义全局颜色变量
在这里插入图片描述

2、在 build 文件夹中找到utils.js文件，将它的**scss: generateLoaders(‘sass’)**修改为

scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '../src/style/baseColor.scss') //这里是建的存放变量的scss，我的是 baseColor.scss

        }

      }),

在这里插入图片描述

3、 a. 将style 的lang定义为scss
b. 在需要引用的地方 @import 全局变量样式文件路径 (不加也可使用）
c. 使用时直接用 $全局颜色变量名 代替颜色进制表达[
在这里插入图片描述
注意：定义全局变量后 npm run dev 也许会报错查看此片博文
https://blog.youkuaiyun.com/moon_tang/article/details/97616784