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.
Asked
Active
Viewed 3.5k times
31
Gregory Bleiker
- 644
- 1
- 7
- 12
3 Answers
39
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.
--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'.
CodeSamurai
- 623
- 3
- 6
-
18How does this answer the question? I mean, the question was: how to build web components now, that the extractCss is deprecated? – Vlad Jul 02 '21 at 13:08
-
1I tried out to build and run in development and production mode, without custom webpack file. I removed "extractCss" from angular.json file and changed "./node_modules/bootstrap/dist/css/bootstrap.min.css" under "styles" option to "bootstrap/dist/css/bootstrap.min.css". Styling works well. In development mode, there are styles.css, styles.js listed. In production mode there is styles.{hashCode}.css file generated that contains all the styles, placed in app/dist folder. With custom webpack, probably somebody else can give a good answer. – CodeSamurai Jul 16 '21 at 14:36
-
I have done the upgrade to angular 13, but I still see the style.js in prod – albanx May 21 '22 at 09:08
5
Removing extractCss in angular.json solves the problem
"extractCss": true
Sengottaian Karthik
- 388
- 4
- 10
-1
I ran into this problem on the new Angular 13. In my case I solved it by adding styles to app.component.scss
Grzegorz Kniażuk
- 109
- 3
- 10
-
3It would be helpful if you could add some more description so that it is clear what you mean by "adding styles to app.component.scss." Maybe you could give an idea of what it was and what you changed it to? – Software Prophets May 20 '22 at 14:45
-
-
I won't down vote, but I have to agree with the above comments. I have no idea what this means. – Darin Cardin Jun 26 '23 at 17:53
-
Just add your styles to app.component.scss and disable style encapsulation – Grzegorz Kniażuk Aug 16 '23 at 10:04