vue-cli3配置全局变量

　引入插件sass-resources-loadernpm

install sass-resources-loader

例如把颜色的变量都放到color.scss文件中

//把颜色的变量都放到color.scss文件中
@charset "UTF-8";
@import "base";

$defaultColor:#296BB5;//
$activeColor:#1F58B5;
$colorBorder:#ddd;

在vue.config.js文件中添加css 预处理代码。

color.scss中的变量在其它组件中都可以直接使用了。

module.exports = {
    css: {
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {
      sass: {
        prependData: `
        $env: ${process.env.NODE_ENV};
        @import "src/assets/css/color.scss";`
      }
    },
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
}