component styleUrls not working in production build Angular

Question

I recently updated one of my projects to Angular 13 from 10, during development everything worked just fine. Then when I generated a production build to notice that there were styling issues. After some investigation, I find out that the problem has to do with styleUrls somehow not reading the stylesheet link. I found this post and this one, and more like them providing some workaround, not solutions and specifics on why that's happening. I only tried one of the suggested fixes because most did not look like viable solutions.

I tried the require method; replacing styleUrls with styles then requiring the stylesheet like so require('home.component.css') it works however my styling is in scss and my project is quite large it will take me forever to update all the styleUrls to styles.

Does anyone have an idea of why this is happening exactly and what the fix is?

There are no issues in the development server, only when the final build is generated

Sample code, not much changed from the update (Angular 10 -> 13) I can't think of any other code to provide to help.

home.component.ts

import { Component, OnInit } from '@angular/core';
//...

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'], // <-- problematic
  // styles: [require('home.component.css')] // works, notice the ext change I have css file to go along

})
export class HomeComponent implements OnInit {
  //...
  constructor(/** ... */) {}

  ngOnInit(): void {
    //...
  }
  //...
}

home.component.html

<div class="container">
    <!-- ... -->
</div>

home.component.scss

.container {
    width: 100%;
    height: 100%;
    background-color: red;
    /* ... */
}

In development ng serve, I can see the red background

In production ng build or ng build --configuration production --aot I can't see it, it defaults to white

Answer 1

I left this project alone until a few days ago when I got a hint of a solution while working on a different project. Going from Angular 10 to 13 the Angular workspace configuration, angular.json, changed a bit (since v11 actually) and that's where it got me. I had the nested property optimization (see v10 codes below) set to true under the production environment and false under development. when set to true It performs a bunch of optimization on scripts & styles and since v11 on fonts too. styles on v10 was just a boolean property that, when set to true, minified the styles. Since v11, styles can also be an object with boolean properties minify & inlineCritical. By default, they are set to true. In my case, the issue was with inlineCritical so I set it to false (see v13 codes below).

This is not a solid solution, since an optimization option meant to "boost" performance is being turned off. I will keep investigating why exactly this is happening and posts any updates.

Simplified angular.json v10

{
  "projects": {
    "app_name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": true // <=== The issue 
            },
            "development": {
              "optimization": false
            }
          }
        }
      }
    }
  }
}

Simplified angular.json v13

{
  "projects": {
    "app_name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": {
                "styles": {
                  "inlineCritical": false // <=== The fix
                }
              }
            },
            "development": {
              "optimization": false
            }
          }
        }
      }
    }
  }
}

Additional context; this project is using Bootstrap for styling and the other one that gave me a hint is using Tailwind; I had the same issue with both.