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?

I just stumbled upon something similar too, did you find the answer? — AsGoodAsItGets
– AsGoodAsItGets, Commented Jul 20, 2018 at 13:52
@AsGoodAsitGets Nope. I'm currently living with this annoying "feature". — kayahr
– kayahr, Commented Jul 31, 2018 at 7:44
Just did a search, maybe this will help: github.com/angular/angular-cli/issues/6599 — AsGoodAsItGets
– AsGoodAsItGets, Commented Jul 31, 2018 at 7:56

AsGoodAsItGets · Accepted Answer · 2018-07-31 08:29:55Z

2

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.

answered Jul 31, 2018 at 8:29

AsGoodAsItGets

3,25139 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kayahr Over a year ago

That's a nogo for me because this enforces that the application must always be deployed in the web root because of the absolute URLs and can't run in sub folders. That's even more annoying than the file duplication.

AsGoodAsItGets Over a year ago

Actually no, the application does not need to be deployed in the web root, in our application we are deploying under a folder too. The paths will still be processed and work fine under a sub folder, as long as you have the base href set properly.

Samuel Over a year ago

FYI, base-href does not modify css url paths as of now. Meaning /path will remain unchanged, so deploying from a subdirectory won't currently work because one would have to prefix css manually or remove the leading slash so that the base href of the index.html will take effect. o_0

Collectives™ on Stack Overflow

How to disable URL resolving in CSS in Angular CLI app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related