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 *;
        `,
      }
    }
}
目录
相关文章
|
11月前
|
JavaScript 小程序
小程序JS动态修改样式vv
小程序JS动态修改样式
224 0
使用全局scss变量
使用全局scss变量
1055 0
|
3月前
|
JavaScript
js【详解】自动类型转换
js【详解】自动类型转换
19 0
|
5月前
|
JavaScript 前端开发
ECMAScript标准的两种语法--默认导出导入与命名式导出导入
ECMAScript标准的两种语法--默认导出导入与命名式导出导入
|
11月前
|
JavaScript
ES模块导入引发的vue未定义变量报错
vue组件里,明明变量已经在 data 中定义好了,但控制台还是一直报错
74 0
|
JavaScript
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化语法(默认、按需导入导出的操作)
【ES6】模块化语法(默认、按需导入import导出export的操作)
|
JavaScript
js:动态import导入script脚本文件
js:动态import导入script脚本文件
273 0
|
前端开发 JavaScript
组件库都在使用CSS变量了
SS 变量是一个非常有用的功能,几乎所有浏览器都支持
282 0
在vuecli3怎么设置全局公用的样式变量?
在vuecli3怎么设置全局公用的样式变量?
162 0
|
JavaScript 前端开发 PHP
laravel 模板变量赋值给js变量
laravel 模板变量赋值给js变量
153 0