Styles are not rendered correctly in the production build of Angular v12

user_10455211 0
Viewed 945

I upgraded an Angular v11 project to Angular v12 by following the Angular Upgrade guide. The project makes use of Angular Material and Bootstrap libraries. The styles are breaking when I make a build using --configuration production flag

I see that this is a prevailing issue wrt Angular

  1. I tried using the --extract-css false flag. In this case I realized that the styles of styles.scss was not getting applied
  2. I have also tried migrating the styles.scss using https://sass-lang.com/documentation/cli/migrator#installation. But didn't work

Angular v11 styles.css Angular v11 styles.css

Angular v12 styles.80d2e538149d4fe8acb1.css Angular v12 style snip

The configuration used in angular.json is as below

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ]

As observed, the 3rd party styles are missing in the Angular v12 build. Can somebody share the details as to how they resolved it? Thanks in advance

angular12 angular-material css
1 Answers

This is an excerpt from a V12 application (upgraded all the way from V8 ) in angular.json:

"projects": {
        "some-app": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "stylePreprocessorOptions": {
                            "includePaths": ["src/"]
                        },
                        "styles": ["src/style/styles.scss"],

Maybe your project misses some of the settings above related to styles? The project I am working on has no issues with styles related to a production (or any other) build. Good luck. I vaguely remember issues with this as well but don't remember the exact solution. That's why I posted the above excerpt hoping this has the clue to your problems. If something pops up in my head about this "I will be back" (excerpt from A. Schwarzenegger )

user_4689100
Related