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 *;
        `,
      }
    }
}
目录
相关文章
|
前端开发 JavaScript
25Vue - 绑定内联样式(数组、自动添加前缀)
25Vue - 绑定内联样式(数组、自动添加前缀)
58 0
使用全局scss变量
使用全局scss变量
1079 0
|
28天前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
28 1
怎么在vite项目中全局导入一个scss文件
|
5月前
|
JavaScript
js【详解】自动类型转换
js【详解】自动类型转换
28 0
|
6月前
|
JavaScript
js中批量修改对象属性
js中批量修改对象属性
|
7月前
|
JavaScript 前端开发 开发者
js如何修改对象中的属性名
js如何修改对象中的属性名
167 0
|
JavaScript
ES模块导入引发的vue未定义变量报错
vue组件里,明明变量已经在 data 中定义好了,但控制台还是一直报错
89 0
|
前端开发
element-plus的自动导入和按需导入
element-plus的自动导入和按需导入
907 0
scss预处理器在项目中的常见用法
scss预处理器在项目中的常见用法
96 0

热门文章

最新文章