Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS Problem on --prod build

See original GitHub issue

Versions

Angular CLI: 1.5.3
Node: 9.2.0
OS: linux x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.3
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.3
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

Repro steps

Step 1 :

ng serve

capture d ecran de 2017-11-21 19-23-37

capture d ecran de 2017-11-21 19-24-35

I have also a masonry layout that is good.

Step 2 :

ng serve --prod

capture d ecran de 2017-11-21 19-36-30

capture d ecran de 2017-11-21 19-37-04

My Masonry layout is also broken (hard to demonstrate sorry!) but i think all is related !

Observed behavior

- My progress bar turns blue!
- My masonry layout is broken!
- No errors anywhere(cli console, navigator console...) but the css is broken with a prod build!

Desired behavior

- My progress bar stays pink!
- My masonry layout stays good!
- Or At least log an error somewhere

Mention any other details that might be useful (optional)

- The --prod build is broking somthing in the css.
- I observed this since angular cli 1.5.0
- All was good with angular cli 1.4.9

Issue Analytics

State:
Created 6 years ago
Reactions:25
Comments:62 (3 by maintainers)

Top GitHub Comments

30reactions

dotlouiscommented, Jan 26, 2018

I have the same issue with CSS ordering in production bundle. I worked around it by adding --extract-css=false to my build command

17reactions

lafamacommented, Mar 22, 2018

This is still and issue in Angular 5 & Angular CLI 1.7.3 --extract-css=false fixes the issue.

Top Results From Across the Web

ng build --prod Angular 8 CSS Rendering Issue compared ...

I ran ng build --prod --extractCss=false then deployed those files and the same issue happened. Is there anything anyone can suggest to either ......

Style issues on prod (angular project) #7457

Hi, I'm having issues while building my angular app to production. ... Then I tried to build angular by deactivating extract-css : the ......

ng build -prod error when compiling scss

when compiling ng app with -prod, i get the following error, assets/scss/bootstrap/bootstrap.scssNode#moveTo was deprecated. Use Container#append any known ...

HELP...Vite Production Issue - CSS Not Loading

... works perfectly no issues, yesterday in production the app wored fine, i then made a change to the CSS and ran npm...

Ionic build --prod -> CSS mixed up, e.g ion-padding-start

Hi, when i publish with ionic build --prod, the css get mixed up. E.g. ion-padding-start published with ionic build (without --prod) CSS ......