如何在编译之前将CDN路径变量添加到styles.scss中?我有一个适用于JS的webpack 4配置。 JS / CSS文件已从所需的CDN网址正确加载。
我要实现的是,与在生产环境上运行的同一网站相比,在localhost上运行的项目将为图像/图标/字体使用不同的CDN url。
我的webpack配置中有以下几行用于设置CDN域:
if (process.env.NODE_ENV === 'production') {
webUrl = 'https://cdn.project.com/';
}
else if (process.env.NODE_ENV === 'development') {
webUrl = 'http://localcdn.localhost/';
}
此代码适用于JS / CSS文件,但是CSS始终使用相对路径来加载背景/字体,当然这是主要域而不是CDN。
也许只是打开styles.scss并在Webpack编译之前手动更新文件?有没有更好的方法?
答案 0 :(得分:1)
经过数小时的反复试验,我找到了适用于webpack 4的解决方案。它可能会帮助尝试解决同一问题的人。
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options : {
url : false,
sourceMap: devMode
}
},
{
loader: 'sass-loader',
options : {
processCssUrls : false,
sourceMap: devMode,
data : "$cdnFolder: 'http://cdn.myweb.net/';"
}
}
],
},
这是webpack.config.js的一部分,在以下部分中:
module : {
rules : {
此配置使scss变量 $ cdnFolder 在每个scss文件中均可用。可以根据当前模式dev / prod / stage更改CDN链接。
答案 1 :(得分:0)
对于 webpack 5,配置略有变化:
{
loader: 'sass-loader',
options : {
additionalData : "$cdnFolder: '" + cdnUrl + "';"
}
}