如何指示 Angular CLI 在构建时不操作 LESS url()？

问题描述

我们有一个 Angular 11 应用程序，需要从 CDN 提供服务（我们构建一次并部署到多个环境，每个环境都有自己的 CDN）。我们使用 LESS 来编写我们的样式。

因此，为了获取惰性块和资产，我们按以下方式设置 __webpack_public_path__（我们不能在构建时设置 --deploy-url，因为它需要是动态的），这是我们首先要做的事情根据 webpack public path 文档导入 main.ts。

declare let __webpack_public_path__: string;
__webpack_public_path__ = `${(window as any).config.assetUrl}/angular/dist/`;

这似乎适用于在模板中加载惰性块和图像，例如<img src="../../../images/img.png" />。但是，这不适用于 CSS（在我们的示例中为 LESS）url()。例如，background: url(../../../images/img.png) 和 background-image: url(../../../images/img.png) 在构建时解析为 background: url(images/img.png) 和 background-image: url(images/img.png)（除非您提供 --deploy-url，我们不能这样做需要是动态的）。

那么，问题是，有没有办法为 angular-cli 提供 lessOtions => rewriteUrls: "local"？或指示 angular 不解析相对网址？或者任何其他方式将 __webpack_public_path__ 添加到这些背景图片中？

我下面的自定义 webpack 配置似乎什么也没做：

const path = require('path');

module.exports = {
    entry: [
        "./src/main.ts"
    ],module: {
        rules: [
            {
                test: /\.less$/i,exclude: [path.resolve(__dirname,'node_modules')],use: [
                    {
                        loader: "less-loader",options: {
                            lessOptions: {
                                rewriteUrls: "local",}
                        }
                    }
                ]
            }
        ]
    }
}

这是我们的文件夹结构：

--root
  |--angular
    |--dist                       // Build artifacts are here
      |--main.js                  // background images urls resolve to "images/img.png"
      |--images
        |--img.png
    |--src
      |--main.ts
      |--app
        |--app.component.ts 
        |--app.component.less     // Assume background/background-image are here
  |--images
    |--img.png                    // This is the image referred in background/background-image urls

我们可以在构建期间不将图像复制到 dist 文件夹（如果可以实现），我们还是将 images 文件夹发送到我们的 CDN。

提前致谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）