使用全局scss变量

简介: 使用全局scss变量

1.安装sass-resources-loader

执行以下命令:

npm install sass-resources-loader --save-dev


2.在build文件夹的utils.js文件代码中scss: generateLoaders('sass')后面添加如下代码:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/styles/index.scss') //全局变量文件的相对路径
    }
  }
),


3.重启服务

npm run dev


这时就可以使用全局scss变量了



举例:按钮背景颜色使用全局颜色变量


全局变量文件的写法:

$mainColor:#f386a7;


全局变量的使用方法:

.el-button {
  background-color: $mainColor;
}


目录
相关文章
|
9月前
|
存储 JavaScript 前端开发
js变量和常量的应用案例
js变量和常量的应用案例
49 1
|
2月前
|
存储 前端开发 JavaScript
css的变量和自定义变量概念
css的变量和自定义变量概念
|
2月前
scss变量自动导入
scss变量自动导入
55 2
|
2月前
|
JavaScript
JS作用域(全局作用域+局部作用域)
JS作用域(全局作用域+局部作用域)
22 0
|
2月前
|
前端开发 JavaScript
|
8月前
|
前端开发
css定义变量
css定义变量
41 0
|
9月前
|
前端开发
|
12月前
|
JavaScript C#
js中变量声明的规则
js中变量声明的规则
50 0
|
前端开发
CSS全局关键字
CSS全局关键字
83 0
|
JavaScript
vue项目定义全局常量并进行使用
vue项目定义全局常量并进行使用
214 0