Webpack、Scss - 编译前添加cdn服务器路径

Question

如何在编译前将 cdn 路径变量添加到 styles.scss 中？我有一个适用于 JS 的 webpack 4 配置。 JS/CSS 文件从所需的 cdn url 正确加载。

我想要实现的是，在 localhost 上运行的项目将为图像/图标/字体使用不同的 cdn url，而不是在生产环境中运行的同一个 Web。

我的 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。

也许只是在 webpack 编译之前打开 styles.scss 并手动更新文件？没有更好的办法吗？

Answer 1

对于 webpack 5，配置略有变化：

  {
      loader: 'sass-loader',
      options : {
                   additionalData : "$cdnFolder: '" + cdnUrl + "';"
                }
   }                      

Answer 2

经过数小时的反复试验，我找到了这个适用于 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 文件中都可用。 CDN链接可以根据当前模式dev/prod/stage进行更改。