title: How to instruct Angular CLI to not manipulate LESS url() at build time?
body: <p>We have an Angular 11 application, which needs to be served from a CDN (we build once and deploy to multiple environments and each environment has it's own CDNs). We use LESS for writing our styles.</p>
  <p>So, to fetch lazy chunks and assets we set the <code>__webpack_public_path__</code> in the following manner (we cannot set <code>--deploy-url</code> at build time as it needs to be dynamic), this is the first thing that we import in <code>main.ts</code> as per <a href="https://webpack.js.org/guides/public-path/" rel="nofollow noreferrer">webpack public path</a> docs.</p>
  <pre><code>declare let __webpack_public_path__: string;
  __webpack_public_path__ = `${(window as any).config.assetUrl}/angular/dist/`;
  </code></pre>
  <p>This seems to be working fine for loading lazy chunks and images in templates for e.g. <code>&lt;img src=&quot;../../../images/img.png&quot; /&gt;</code>. But, this does not work for CSS (in our case LESS) <code>url()</code>s. For example, the <code>background: url(../../../images/img.png)</code> and <code>background-image: url(../../../images/img.png)</code> get resolved to <code>background: url(images/img.png)</code> and <code>background-image: url(images/img.png)</code> at build time (unless you provide <code>--deploy-url</code>, which we can't do as it needs to be dynamic).</p>
  <p>So, the question is, is there a way to provide <code>lessOtions</code> =&gt; <code>rewriteUrls: &quot;local&quot;</code> to angular-cli? or instruct angular not to resolve relative urls? Or any other way to prepend <code>__webpack_public_path__</code> to these background images?</p>
  <p>My following custom webpack config seems to do nothing:</p>
  <pre><code>const path = require('path');
  
  module.exports = {
      entry: [
          &quot;./src/main.ts&quot;
      ],
      module: {
          rules: [
              {
                  test: /\.less$/i,
                  exclude: [path.resolve(__dirname, 'node_modules')],
                  use: [
                      {
                          loader: &quot;less-loader&quot;,
                          options: {
                              lessOptions: {
                                  rewriteUrls: &quot;local&quot;,
                              }
                          }
                      }
                  ]
              }
          ]
      }
  }
  </code></pre>
  <p>Here's our folder structure:</p>
  <pre><code>--root
    |--angular
      |--dist                       // Build artifacts are here
        |--main.js                  // background images urls resolve to &quot;images/img.png&quot;
        |--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
  </code></pre>
  <p>We are fine with images not being copied to the <code>dist</code> folder during build (if that can be achieved), we ship our <code>images</code> folder to our CDNs anyways.</p>
  <p>Thanks in advance!</p>