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 小程序
小程序JS动态修改样式vv
小程序JS动态修改样式
236 0
使用全局scss变量
使用全局scss变量
1071 0
|
1天前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
怎么在vite项目中全局导入一个scss文件
|
4月前
|
JavaScript
js【详解】自动类型转换
js【详解】自动类型转换
25 0
|
6月前
|
前端开发 开发者
sass中的导入与部分导入
sass中的导入与部分导入
103 0
|
JavaScript
ES模块导入引发的vue未定义变量报错
vue组件里,明明变量已经在 data 中定义好了,但控制台还是一直报错
83 0
|
编译器
wepy踩坑-未发现相关 sass 编译器配置,请检查wepy.config.js文件
wepy踩坑-未发现相关 sass 编译器配置,请检查wepy.config.js文件
138 0
scss预处理器在项目中的常见用法
scss预处理器在项目中的常见用法
89 0
|
JavaScript
js:动态import导入script脚本文件
js:动态import导入script脚本文件
287 0
在vuecli3怎么设置全局公用的样式变量?
在vuecli3怎么设置全局公用的样式变量?
167 0