How to disable URL resolving in CSS in Angular CLI app

Question

I have a simple Angular CLI (6.0.7) application which has some assets in the src/assets/ folder. Some of them are referenced in CSS files of the Angular components. Example:

/* src/app/app.component.css */
.test-div {
    background: url(../assets/test.png);
}

When I build the project with ng build then I end up with an output structure like this:

dist/
  myapp/
    assets/
      test.png     <-- This one is simply copied from the src/asssets folder
    index.html
    main.js
    test.png       <-- This one is created by magic Angular CSS processing
    ...

Additionally the CSS is rewritten to point to the test.png file in the root instead of the test.pngfile in the assets folder.

I don't like this behavior at all. I know there is some benefit when compiling the app in production mode which adds some hash prefix to the asset files referenced from CSS to prevent caching but I don't like the file duplication and the inconsistency between assets referenced in CSS and assets manually referenced in TypeScript. So I would prefer to disable this special CSS processing so Angular does not resolve URLs in CSS and keeps the URLs as is.

So how can I disable this magic CSS processing of Angular CLI?

Answer 1

Making the paths to the fonts/images absolute as in /assets/fonts/myfont.woff, as described here: https://github.com/angular/angular-cli/issues/6599#issuecomment-379039521 solved the issue for me.

It's a hack, but it works.

Note that it doesn't disable the processing, it just avoids the unnecessary/annoying duplication of the files, which I assume is what you wanted in the first place.