Webpack sometimes does not properly resolve `url()` resources from package deep imports

Riproduci la build da src/styles.scss usando font-awesome@4.7 e i riferimenti url() segnalati. Inizia tracciando il percorso di risoluzione di angular-css-resource e il modo in cui vengono gestiti i package deep imports; il lavoro è completato quando la build di Angular CLI risolve le risorse dei font senza gli errori segnalati.

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm getting an error for fontawesome & icomoon references when switching to esbuild. It works fine for default angular build

Minimal Reproduction

1. Install font-awesome@4.7
2. Reference it from styles as @import 'font-awesome/scss/font-awesome';

Exception or Error

X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.eot?p2jara"

    src/styles.scss:10:11:
      10 │   src: url("fonts/icomoon.eot?p2jara");
         ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "fonts/icomoon.eot?p2jara" as external to exclude it from the bundle, which will remove this error.


X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.eot?p2jara#iefix"

    src/styles.scss:11:11:
      11 │   src: url("fonts/icomoon.eot?p2jara#iefix") format("embedded-open...
         ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "fonts/icomoon.eot?p2jara#iefix" as external to exclude it from the bundle, which will remove this error.


X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.ttf?p2jara"

    src/styles.scss:11:78:
      11 │ ...ed-opentype"), url("fonts/icomoon.ttf?p2jara") format("truetype...
         ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "fonts/icomoon.ttf?p2jara" as external to exclude it from the bundle, which will remove this error.


X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.woff?p2jara"

    src/styles.scss:11:130:
      11 │ ...("truetype"), url("fonts/icomoon.woff?p2jara") format("woff"), ...
         ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "fonts/icomoon.woff?p2jara" as external to exclude it from the bundle, which will remove this error.


X [ERROR] [plugin angular-css-resource] Could not resolve "fonts/icomoon.svg?p2jara#icomoon"

    src/styles.scss:11:179:
      11 │ ...at("woff"), url("fonts/icomoon.svg?p2jara#icomoon") format("svg");
         ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "fonts/icomoon.svg?p2jara#icomoon" as external to exclude it from the bundle, which will remove this error.


X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.eot?v=4.7.0"

    src/styles.scss:11383:11:
      11383 │   src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
            ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0"

    src/styles.scss:11384:11:
      11384 │   src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") f...
            ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.woff2?v=4.7.0"

    src/styles.scss:11384:95:
      11384 │ ...pe"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") form...
            ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.woff?v=4.7.0"

    src/styles.scss:11384:162:
      11384 │ ...f2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") forma...
            ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.ttf?v=4.7.0"

    src/styles.scss:11384:227:
      11384 │ ...ff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format...
            ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] [plugin angular-css-resource] Could not resolve "../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular"

    src/styles.scss:11384:295:
      11384 │ ...pe"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawes...

Your Environment

Angular CLI: 15.0.4
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      15.0.4
@angular/cdk                    15.0.3
@schematics/angular             15.0.4
rxjs                            7.8.0
typescript                      4.8.4

Anything else relevant?

No response