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?

if you do ng build --pord do you have styles bundle outputed in dist folder ? — angularconsulting.au
– angularconsulting.au, Commented Oct 30, 2017 at 22:42
Yes, I have a "styles.<stuff>.bundle.css" file and it appears to have what I want in it. — Kirk Liemohn
– Kirk Liemohn, Commented Oct 30, 2017 at 23:58
I wonder if you npm install -g http-server and then serve the dist folder with http-server what would be outcome of that?. Also can you see if css bundle gets loaded in network tab in dev tools? — angularconsulting.au
– angularconsulting.au, Commented Oct 31, 2017 at 1:27

Fateh Mohamed · Accepted Answer · 2018-04-10 15:36:33Z

14

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

answered Apr 10, 2018 at 15:36

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

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

1 Comment

Güney Saramalı Over a year ago

Was having the same issue; the styles.css was getting created with my stuff inside and it was linked to the index.html but my global csses and material theme was not getting reflected or rendered to the page, only when I open devtool and from source tab I was adding even a single space to styles.css it was getting applied. I search for hours for this and there was only solution to extractCss to JS. which was a bit disturbing on prod level. This solution worked for me even without extractCss. I was on Angular 12.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related