Extracting CSS into JS with Angular 11 (deprecated extractCss)

Question

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.

Answer 1

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'.