Npm Webpack，Scss-在编译之前添加cdn服务器路径

如何在编译之前将cdn path变量添加到styles.scs中？我有一个Webpack4配置，可以很好地用于JS。JS/CSS文件从所需的cdn url正确加载

我想要实现的是，在localhost上运行的项目将使用不同于在生产环境中运行的相同web的图像/图标/字体的cdn url

My webpack config有以下几行用于设置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.scs并在编译网页包之前手动更新文件？难道没有更好的方法吗？

经过几个小时的反复试验，我找到了Webpack4的解决方案。它可能会帮助试图解决同一问题的人

        {
            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变量$CDN文件夹在每个scss文件中都可用。CDN链接可以根据当前模式dev/prod/stage进行更改。

另一种解决方案是，在css中使用相对URL，并从CDN加载css本身，这样css中的资产将相对于css路径。@felixmosh我是这样做的，但它总是加载主域。CSS是从哪里加载的，而不是从哪里加载的，这不重要吗？也许我错了，但我正在搜索这个解决方案，因为相对URL不起作用。也许你的html中有一个标记，这个标记会覆盖它behaviuor@felixmosh无基本标记：）您是否100%确定css中的相对链接是使用css文件的域而不是主域创建的？是的，我确定，考虑一下，例如，字体真棒，只提供css文件，那么浏览器如何知道字体本身的路径呢？它必须是相对于那个css文件的。