Removing `ExtractCss: true` from angular.json loads css in style tags, instead of a stylesheet link

See original GitHub issue

🐞 Bug report

According to the release notes for version 11 (https://github.com/angular/angular-cli/releases/tag/v11.0.0-next.0 ) ExtractCss property can now be removed from angular.json, because its default value is set to true. However, if I don’t explicitly set it to true, my project css is loaded in style tags, instead of the expected stylesheet link.

🔬 Minimal Reproduction

This can be reproduced on a new instance.

  1. Create a new project with scss styles.
  2. go to angular.json and add “extractCss”: true to the build options
  3. Result: the project styles are loaded in a stylesheet link: <link rel="stylesheet" href="styles.css">
  4. Remove the “extractCss”: false and build the project again
  5. Result: Styles are loaded in <style> tags. Expected: The behavior shouldn’t change and styles should be loaded in a stylesheet link.

At least this is how the breaking change has been described in your release notes:

@angular-devkit/build-angular: deprecate extractCss browser builder option (dd26018) Browser builder extractCss option default value has been changed from false to true. This is to reflect the default behaviour when this deprecated option is removed.

Thank you for your help. 😃

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8

github_iconTop GitHub Comments

1reaction
JenPelevacommented, Mar 31, 2021

Yea, I figured that would be the case😁 Sorry, again, for wasting your time.

1reaction
alan-agius4commented, Mar 31, 2021

Haha, no worries 😁

In that case, it’s probably something to do with the custom Webpack configuration or the custom builder. We don’t provide support for any of these.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Extracting CSS into JS with Angular 11 (deprecated extractCss)
Getting error “extractCss is deprecated” comes because it has default value as true now. extractCss can be safely removed from angular.json ...
Read more >
CSS Problem on --prod build · Issue #8577 · angular/angular-cli
Seems that the workaround at this point is to include all your global styles in src/styles.scss rather than builder options in angular.json.
Read more >
Dynamically Load CSS with the Angular CLI | juri.dev
I've written about lazy loading in the past, as well as how to handle various styling issues in Angular. This time we'll explore...
Read more >
What's new in Angular CLI 11.0? | Ninja Squad
The extractCss has now a default value of true and has been deprecated: you can remove it from your angular.json config (or let...
Read more >
ng build - Angular
Option Description Value Type Default Value ‑‑aot Build using Ahead of Time compilation. boolean true ‑‑base‑href Base url for the application being built. string ‑‑delete‑output‑path Delete...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found