vue项目中，配置全局scss变量

如下图所示，在imports.scss文件中的css变量，想要在单个vue组件中使用 

step1：自动化导入样式文件 ( 用于颜色、变量、 mixin 等 ) ，可以使用 style-resources-loader 。

npm i -D style-resources-loader

step2：在webpack配置文件中，增加以下配置即可

      const path = require("path");
      function addStyleResource(rule) {
        rule.use("style-resource")
            .loader("style-resources-loader")
            .options({
                patterns: [path.resolve(__dirname, "./src/styles/imports.scss")],
            });
      }
      module.exports = {
        chainWebpack: (config) => {
          const types = ["vue-modules", "vue", "normal-modules", "normal"];
          types.forEach((type) =>
            addStyleResource(config.module.rule("scss").oneOf(type))
          );
        },
      };

step3：重启项目

npm run dev