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


目录
相关文章
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1月前
|
前端开发 开发者 容器
CSS 变量的作用域是什么?
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域,以及掌握变量的覆盖和继承规则,可以创建更具可维护性、灵活性和可扩展性的CSS样式表,实现各种复杂的页面设计和样式需求。
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
7月前
|
存储 前端开发 JavaScript
css的变量和自定义变量概念
css的变量和自定义变量概念
|
7月前
scss变量自动导入
scss变量自动导入
101 2
|
7月前
|
JavaScript
JS作用域(全局作用域+局部作用域)
JS作用域(全局作用域+局部作用域)
36 0
|
存储 JavaScript 前端开发
Javascript作用域 (局部作用域和全局作用域) 详细介绍
Javascript作用域 (局部作用域和全局作用域) 详细介绍
121 0
|
JavaScript
vue项目定义全局常量并进行使用
vue项目定义全局常量并进行使用
266 0
|
JavaScript 前端开发
全局 JavaScript 变量
全局 JavaScript 变量
63 0