vue-cli4 配置全局scss/sass变量

tips:项目使用scss之前吗，首先看看是否sass相应的包

1、_variables.scss文件

/* Variables */

// Base color
$black:#2c2f38;
$green:#1ddfbc;
$blue:#2ec4d5;
$fontColor:#e7ecf0;

2、执行vue add style-resources-loader

vue add style-resources-loader

3、配置vue.config.js

   const path = require("path");
   module.exports = {
     ...
   	 pluginOptions: {
	    'style-resources-loader': {
	      preProcessor: 'scss',
	      patterns: [
	      	//加上自己的文件路径，不能使用别名
	        path.resolve(__dirname, 'src/styles/_variables.scss'),
	      ]
	    }
	  }
     ...
    }

4、使用

<style lang="scss">
  #app {
    background-color: $black;
  }
</style>