Angular (12) duplicates my global css variables

Question

I have create a new project using @angular/cli (12.2.13):

ng new test

I also said I wanted the configuration to be with scss.

In my styles.scss, I did add:

:root {
  --myVar: red;
}

I then run ng build --configuration production

and when I checked the resulting index.html in my dist/ folder I have:

with styles.b08f420056d5c4d3e83d.css also containing :root{--myVar:red}

In production, it does result in having that css variable twice. Is there any way to prevent this ?

user_12265898 · Answer

What you see as an issue, is more like an advantage. The case that you describe in angular is called inlining critical styles. Angular checks for the most used values from your css and inlines it, to reduce first contentful paint time.

If you want to disable it, edit your angular config (angular.json) in build section to have this:

"optimization": {
    "styles": { 
        "inlineCritical": false 
    }
}