I was working on an Angular 6 project that recently ran into a problem. All our styles were messed up when we created a production build. There are a lot of complaints about it here.
There seem to be two solutions that work for us and I'll go over both of them.
Move the Styles
The first solution is to remove all your style imports from the Angular.json. Then add them back into the main styles.scss using @imports. So, my Angular CLI styles looks like this:
Open up the styles.scss and add them as imports:
The styles would now change to this:
This worked. I actually think I like putting the styles in the main styles.scss instead of the Angular.json. I prefer to stay out of the Angular.json as much as possible.
Change Extract CSS Value
The second option, and the one in which we chose to do for this project, was to change the extractCss value from true to false. Inside your Angular.json find the value:
You'll find the value at projects.architect.build.configuration.product.extractCss
Change it to:
Now open up your package.json and find the build prod command:
Add the build-optimizer argument:
"prod":"ng build --build-optimizer"
This should address the issue.
This caused a few grumblings among my team about how borked Angular CLI is, but I still enjoy working with it.