'Angular 12 css fallback

Angular 12's css are generating a fallback for css's variables. How can I prevent that? enter image description here

cssangular


Solution 1:[1]

I think it has to do with how Angular compiles.
You could switch back from AOT to JIT, and see if that helps you;
but I don't know why you have a problem with it.

If you want to assign only the style you have defined on your component CSS, you can use ViewEncapsulation with ShadowDom.

Solution 2:[2]

Those fallbacks are generated for IE support since CSS Custom Properties are not supported in IE. While Angular 12 deprecates IE11 support, it doesn't completely remove this fallback feature.

You can overwrite Angular 12's browser support settings by adding browserslist configuration. For example, in a .browserslistrc file you could add Angular's latest browser support config found here, to which you can add "not IE 11" to be sure. More details on Browserslist you can find here.

Example code for .browserslistrc

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11

If you can update further, this issue disappears once you update to Angular 13 (IE11 support is fully removed).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Faus Rodriguez
Solution 2 Teodora Chiosa

Related Questions