Webpack,Scss-在编译前添加CDN服务器路径

时间:2019-03-07 21:11:46

标签: npm webpack sass

如何在编译之前将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编译之前手动更新文件?有没有更好的方法?

2 个答案:

答案 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 + "';"
                }
   }