scss变量自动导入

简介: scss变量自动导入

一、背景


我们平时项目开发的时候,会有如下应用场景,scss变量自动引入,来方便我们直接使用


二、方法


1.定义scss变量文件 var.scss


$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;


2.修改vite.config.js


css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}
_揽
+关注
目录
打赏
0
1
2
0
572
分享
相关文章
|
9月前
|
egg.js 24.9sequelize模型-批量新增和修改器
egg.js 24.9sequelize模型-批量新增和修改器
90 0
egg.js 24.9sequelize模型-批量新增和修改器
使用全局scss变量
使用全局scss变量
1091 0
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
186 1
怎么在vite项目中全局导入一个scss文件
|
7月前
|
js【详解】自动类型转换
js【详解】自动类型转换
36 0
js中批量修改对象属性
js中批量修改对象属性
js如何修改对象中的属性名
js如何修改对象中的属性名
179 0
ES模块导入引发的vue未定义变量报错
vue组件里,明明变量已经在 data 中定义好了,但控制台还是一直报错
99 0
Python mplfinance库④ 如何自定义style样式
Python mplfinance库④ 如何自定义style样式
1488 0
Python mplfinance库④ 如何自定义style样式
element-plus的自动导入和按需导入
element-plus的自动导入和按需导入
946 0