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.
  },
}