Angular wrong css order in production build

Question

I have two css files which I load them in src/assets as following:

My Angular.json file:

"styles": [
  "src/assets/css/base.css",
  "src/assets/css/template.css"
]

I have a class which I defined in both files.

In base.css I have the following:

.my-class {
  background: red;
}

And In template.css I have the following:

.my-class {
  background: blue;
}

When I serve the app with ng serve I see blue background (red background is going to be overwritten by the blue background and it's the true scenario).

But when I build the project by ng build --prod it gives me the wrong order. This means I see the red background. Any idea?

Yeah, had the same issue. The normal production build messes up the css order. Answer below works. Very annoying issue. — Michelangelo
– Michelangelo, Commented Sep 1, 2019 at 18:48

chrismclarke · Accepted Answer · 2019-09-01 18:44:46Z

4

This is a known (and open) issue with angular: https://github.com/angular/angular-cli/issues/9475

A possible workaround:

ng build --prod -extract-css false

Alternatively you could just try to be more precise with your css selectors

edited Sep 1, 2019 at 18:44

answered Sep 1, 2019 at 18:42

chrismclarke

2,11512 silver badges17 bronze badges

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

4 Comments

chrismclarke Over a year ago

I think more important than the cli version is @angular-devkit/build-angular which organises the build scripts, but I could be wrong

Michelangelo Over a year ago

Ran into this a few months ago, still not fixed as it seems. The normal production build messes up the order of css sheets indeed.

chrismclarke Over a year ago

I also saw some people talk about just loading one css file and dynamic importing all node modules css from it, but I haven't managed to get it working successfully myself

Michelangelo Over a year ago

Well that seems like even more work and to be honest not worth the time. That is basically how the CLI would do it right? One big CSS file, if it only did it in the specified order haha

Leonardo Tanoue · Accepted Answer · 2020-11-03 19:58:47Z

This might not be the case every time but one weird behavior is that if you have @import in your css it creates a new file at the bottom of the generated css file, which causes things to get out-of-order (source https://github.com/angular/angular-cli/issues/9475#issuecomment-427225617)

The problem is with your @import like you are importing some google font. So Angular transpile that stylesheet on priority basis and gets loaded before the said order. Let see this example:

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/css/new-age.css" ],

Just look at this new-age.css file: @import url('https://fonts.googleapis.com/css?family=Lato|Oswald'); html, body { width: 100%; height: 100%; background: #edf1f5; } ......

Solution is to make a separate css file for these imports and then mention it angular.json like this:

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/css/new-age.css", "src/assets/css/imp.css" ],

My suggestions is to either avoid using @import completely (you can use a link tag from the index.html instead) or use @import for all the styles (so that the list on angular.json only has styles.css)

Collectives™ on Stack Overflow

Angular wrong css order in production build

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related