🐞 bug report

Affected Package

Seems to be related to SCSS-compiling but seems to be also related to angular itself.

Is this a regression?

It seems this bug is also existing in version 8.2.3 / 8.3.0, most likely in all versions inbetween.

Description

If an angular project uses SCSS and imports a font by url, in some cases angular wrongly inserts a [_ngcontent-...] into the url so the font cannot be loaded.
See reproduction section for details.

🔬 Minimal Reproduction

Created a reproduction repo: https://github.com/mhombach/angularBugReport1
But basically the one step to reproducer is to add the following line into your SCSS file:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

If you load this app and look into the network inspector you will see a 400 error for loading the font and the reason is that the above import-url is changed to:
https://fonts.googleapis.com/css2?family=Roboto:wght@400;500[_ngcontent-kph-c11];700&display=swap
This url is btw the official url that google-fonts is giving you for embedding.

🔥 Exception or Error

There is no error other than the browser indication the 400.

🌍 Your Environment

Angular Version:

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cli                      10.0.7
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?
I tested some patterns that don't produce this error.
Those lines are working:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');

I think this error is produced when there are more then 2 weight-numbers separated by a semicolon.

Update:
This import line here

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500;700&family=Roboto:wght@400;500&display=swap');

produces this url

https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500;700&family=Roboto[_ngcontent-muh-c11]:wght@400;500&display=swap

so this time the insert happens on a different place.