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

[JenPeleva]

🐞 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:
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. :)

[alan-agius4]

Hi @JenPeleva,

Can you please provide the output of ng version? Are you using a 3rd party builder by any chance?

By the way did you mean <script> tag?

[JenPeleva]

Hi @alan-agius4, thanks for the quick response.

No, I'm not using a custom builder. It can be reproduced on a clean new Angular project. My Angular version is "@angular/cli": "~11.1.4", "@angular/core": "~11.1.2". If I set extractCss: true in angular.json, the scss I've referenced in the styles array is loaded as a stylesheet link (this is how it should work):

"styles": [
"src/styles.scss"
]

If I remove extractCss: true, the css is loaded in a <style> tag in the head (which is not expected). The breaking changes description says that removing extractCss: true will preserve the behavior, because extractCss is set to true internally. However, it seems that it doesn't.

[alan-agius4]

Mind sharing the output of ng version please, as I am unable to replicate this behaviour.

[JenPeleva]

Sure :)

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 11.1.4
Node: 12.18.3
OS: win32 x64

Angular: 11.1.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1101.4
@angular-devkit/build-angular 0.1101.4
@angular-devkit/core 11.1.4
@angular-devkit/schematics 11.1.4
@angular/cli 11.1.4
@schematics/angular 11.1.4
@schematics/update 0.1101.4
rxjs 6.6.7
typescript 4.1.5

[JenPeleva]

I'm sorry, that's really embarrassing. I somehow didn't see the stylesheet link... I guess it was some kind of a confirmation bias on my side...

This works properly on a blank project, but behaves as described in the bug in our project. And what is specific about our project... we have a custom-builder - a customWebpackConfig...

[alan-agius4]

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.

[JenPeleva]

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}