使用全局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 前端开发 C#
Select 下拉框切换拦截的三种方案|【Proxy】
Select 下拉框切换拦截的三种方案|【Proxy】
2587 0
微信分享报错 wxlog:Error:fail to load Keychain status:-25300 解决办法
微信分享报错 wxlog:Error:fail to load Keychain status:-25300 解决办法
3990 0
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
1036 1
怎么在vite项目中全局导入一个scss文件
|
机器学习/深度学习 人工智能 监控
X-R1:3090也能训7B模型!开源框架X-R1把训练成本打下来了:10美元训出企业级LLM
X-R1 是一个基于强化学习的低成本训练框架,能够加速大规模语言模型的后训练开发。仅需4块3090或4090 GPU,1小时内完成训练,成本低于10美元。
1051 5
X-R1:3090也能训7B模型!开源框架X-R1把训练成本打下来了:10美元训出企业级LLM
|
JavaScript 前端开发 索引
find 和 findIndex 的讲解和实现
`findIndex` 是 JavaScript 数组方法,用于查找数组中满足条件元素的索引。语法:`array.findIndex(callback[, thisArg])`。`callback` 定义查找条件,并可接收元素、索引和数组自身作为参数。`findIndex` 从头遍历数组,找到首个符合条件的元素即返回其索引,未找到则返回 -1。
480 2
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
671 1
|
JavaScript
vue 发送请求时展示进度条——NProgress的简单使用
vue 发送请求时展示进度条——NProgress的简单使用
1448 0
|
前端开发 JavaScript
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
414 1
|
JavaScript 开发工具 git
使用TS+rollup打造一个npm工具库
使用TS+rollup打造一个npm工具库
598 0