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?

Answer 1

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