SCSS 全局变量配置

1,728 阅读1分钟

项目中使用SCSS一般会初始化一些主题色变量、通用字体变量等。。。。,但是使用时需要在不同的 地方‘@import’ 引入才能使用定义好的通用变量

例如:

variables.scss

test.vue

既然已经是全局了不我们不想每次用的时候都引入一遍,而且相对路径也不太好写。 于是我们可以使用

"sass-resources-loader "
$ yarn add sass-resources-loader --dev

该loader githHub地址:sass-resources-loader

然后我们在“sass-loader”处理前用 “sass-resources-loader” 预先处理下

webpack 4 配置见下图完整scss 文件的loader配置 ,若使用vue-cli 2.x/vue-cli 3.x 参考官网案例

这样启动项目后:就可以省区 “@import”语句 来愉快的使用 全局配置的样式了