我在网上搜了很久关于这个问题的答案,国内的回答比较少,基本都是使用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:

收工!

 

 

Logo

前往低代码交流专区

更多推荐