Why are my CSS files ignored with Angular CLI when in prod mode?

Question

I have what I think is a standard .angular-cli.json file. In apps[0] it has:

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

The above works fine with an "ng build" or an "ng serve". However, if I do an "ng build --prod" these two css files are ignored. The way I am getting around this is by using a CDN version of bootstrap.min.css and adding styles.css to a publicly available resource (Azure blog storage) and then referencing them from index.html.

FWIW, if I do an "ng serve --prod" it still works in my localhost/dev environment. But "ng build --prod" does not.

Any ideas where to start?

Answer 1

you have this problem because of the order of css file when bundling them, the only possible solution now is to let only style.css file like this:

 "styles": [
   "styles.css"
  ],

and import bootstrap.min.css inside your style.css

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css");

that willmake your app work in local and prod, the alternative solution is build with --extract-css=false

ng build --prod --extract-css=false