使用全局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;
}


目录
相关文章
|
存储 JavaScript 前端开发
js变量和常量的应用案例
js变量和常量的应用案例
64 1
|
13天前
|
前端开发 开发者 容器
CSS 变量的作用域是什么?
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域,以及掌握变量的覆盖和继承规则,可以创建更具可维护性、灵活性和可扩展性的CSS样式表,实现各种复杂的页面设计和样式需求。
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
6月前
|
存储 前端开发 JavaScript
css的变量和自定义变量概念
css的变量和自定义变量概念
|
6月前
scss变量自动导入
scss变量自动导入
84 2
|
6月前
|
JavaScript
JS作用域(全局作用域+局部作用域)
JS作用域(全局作用域+局部作用域)
33 0
|
JavaScript C#
js中变量声明的规则
js中变量声明的规则
66 0
|
前端开发
CSS全局关键字
CSS全局关键字
101 0
|
JavaScript
vue项目定义全局常量并进行使用
vue项目定义全局常量并进行使用
256 0