全局配置SCSS 变量

Vue 配置插件
1.全局配置SCSS 变量

我用的@vue/cli 4最新版本的脚手架
一.安装

npm i style-resources-loader

二.vue.config.js的配置信息

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        './path/from/context/to/scss/variables/*.scss',
                        './path/from/context/to/scss/mixins/*.scss',
                    ]
                }
            }]
        }]
    },
    // ...
}

三.全局引入的scss文件
1.variables.scss

@charset 'utf-8';
$bg:#fff;
$width:375px;
$height:100px;
$size:75px;

2.mixins…scss

@charset 'utf-8';
@mixin wh($width,$height) {
  width: $width;
  height: $height;
  border: 1px solid red;
}

3.在其他scss和index.vue页面使用

.box{
    .test{
	    font-size:$size;
	    background: $bg;
	  }
  }
.box2{
    @include wh($width,$height) 
  }