vue-cli3：如何在scss中使用env内的环境变量_scss 使用环境变量

我在网上搜了很久关于这个问题的答案，国内的回答比较少，基本都是使用webpack.mix.js，不符合我的预期，就上外网去查了下，找到了使用sass-loader来添加，看了下sass-loader的文档，我使用的是7.3.1版本，果然有这个配置项，于是我就开始了我的操作：

环境：vue-cli3、nodejs12.5.0、macOS

先配置变量

然后在vue.config.js中配置：

源码贴出来：

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("./src"))
      .set("components", resolve("./src/components"));
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use("sass-loader")
        .loader("sass-loader")
        .options({
          data: "$env: '" + process.env.VUE_APP_FILE_URL + "';",
        })
        .end();
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // Provide path to the file with resources
          resources: ["./src/styles/base.scss"],
        })
        .end();
    });
  },
  lintOnSave: false, //如果为false，就是取消eslint规则的检查
};

在.vue文件的style中使用，上面定义的是$env，使用时也是用$env：

收工！