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 *;
        `,
      }
    }
}
目录
相关文章
使用全局scss变量
使用全局scss变量
1080 0
|
1月前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
32 1
怎么在vite项目中全局导入一个scss文件
|
5月前
|
JavaScript
js【详解】自动类型转换
js【详解】自动类型转换
28 0
|
6月前
|
JavaScript
js中批量修改对象属性
js中批量修改对象属性
|
7月前
|
JavaScript 前端开发 开发者
js如何修改对象中的属性名
js如何修改对象中的属性名
169 0
|
JavaScript
ES模块导入引发的vue未定义变量报错
vue组件里,明明变量已经在 data 中定义好了,但控制台还是一直报错
90 0
|
前端开发 JavaScript
组件库都在使用CSS变量了
SS 变量是一个非常有用的功能,几乎所有浏览器都支持
305 0
在vuecli3怎么设置全局公用的样式变量?
在vuecli3怎么设置全局公用的样式变量?
171 0
|
JavaScript 前端开发 PHP
laravel 模板变量赋值给js变量
laravel 模板变量赋值给js变量
164 0
|
JavaScript
typescript74-创建自己的类型声明文件(为已有js提供声明文件)
typescript74-创建自己的类型声明文件(为已有js提供声明文件)
80 0
typescript74-创建自己的类型声明文件(为已有js提供声明文件)