有没有办法通过将scss文件中的process.env.NODE_ENV传递给web-pack中的sass-loader来引用它。如果是这样,任何人都知道如何去做?
这是我的webpack模块lodaers数组。
module: {
loaders: [
{ test: /\.js?$/,
loader: 'babel-loader',
include: path.join(__dirname, '../app'),
exclude: /node_modules/
},
{ test: /\.scss?$/,
loader: 'style-loader!css-loader!sass-loader',
include: path.join(__dirname, '../app', 'styles')
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
include : path.join(__dirname, '../app', 'images'),
loader : 'file-loader?limit=30000&name=[name].[ext]'
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
include : path.join(__dirname, '../app', 'fonts'),
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
我甚至尝试过
{ test: /\.scss?$/,
loader: 'style-loader!css-loader!sass-loader',
include: path.join(__dirname, '../app', 'styles'),
options: {
data: "$env: " + process.env.NODE_ENV + ";"
}
}
但上面打破了构建。 我只想要一种方法来访问我的scss文件中的URL,具体取决于环境。 它不一定是通过webpack,没有硬编码它会有任何想法。 例如:
.contact-transparent{
width: 100%;
height: 100%;
background: url(process.env.NODE_ENV+'/home-background.jpg') left center no-repeat;
}
答案 0 :(得分:0)
我认为您可以使用一个自定义加载程序来完成此任务,该加载程序在其他Sass文件之前被链接。在该加载程序中,您将检查NODE_ENV
的值并在Sass源中进行查找/替换,其中替换值基于env。不花哨,但可以完成工作。例如:
// url-by-env-loader.js
module.exports = (source) => {
const urlsByEnv = {
dev: "the-dev-host.com",
staging: "the-staging-host.com",
prod: "the-prod-host.com"
};
const urlToReplace = "the-url-in-your-sass-source.com";
const urlToUse = urlsByEnv[process.env.NODE_ENV];
const replaceRegex = new RegExp(urlToReplace, 'g');
return source.replace(replaceRegex, urlToUse);
}