vue-cli3:如何在scss中使用env内的环境变量
我在网上搜了很久关于这个问题的答案,国内的回答比较少,基本都是使用webpack.mix.js,不符合我的预期,就上外网去查了下,找到了使用sass-loader来添加,看了下sass-loader的文档,我使用的是7.3.1版本,果然有这个配置项,于是我就开始了我的操作:环境:vue-cli3、nodejs12.5.0、macOS先配置变量然后在vue.config.js中配置:源码贴出来:mo
·
我在网上搜了很久关于这个问题的答案,国内的回答比较少,基本都是使用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:
收工!
更多推荐
已为社区贡献3条内容
所有评论(0)