Extracting CSS into JS with Angular 11 (deprecated extractCss)

Viewed 22562

We are using an Angular 11 app to create a web component. For this it is necessary that all styles are bundled inline into a single JS file. Before Angular 11, we used to do this with extractCss: false in then angular.json config. Now this option has been marked deprecated, and I have not found any documentation on how this should be accomplished now. NB. The extractCss: false still works for the moment.

3 Answers

One of the changes for Angular CLI 11.0 is deprecation of extractCss configuration property.

Getting error “extractCss is deprecated” comes because it has default value as true now. extractCss can be safely removed from angular.json or during the upgrade schematics should do it for you. This means that we don’t use styles.js anymore during the application build. The migration schematic should remove unused properties or replace them with the new alternative once you do the upgrade.

https://angular.io/cli/build

--extract-css

Deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR. Extract CSS from global styles into '.css' files instead of '.js'.

Removing extractCss in angular.json solves the problem

"extractCss": true

I ran into this problem on the new Angular 13. In my case I solved it by adding styles to app.component.scss

Related