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

[llRandom]

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

[clydin]

Either the font-awesome package root import or the package's Sass variable $fa-font-path will need to be set to allow the fonts to be found. Previously the Sass deep import worked on its own due to Webpack specific behavior.
The first option also has the advantage of not requiring the font-awesome Sass files to be processed on every application build.

Package root example:

@import 'font-awesome';

Variable example:

$fa-font-path: 'font-awesome/fonts';
@import 'font-awesome/scss/font-awesome';

[llRandom]

Thanks! It works for esbuild but it breaks regular build. Is it ok?

[clydin]

The first option should work in both (@import 'font-awesome';). The later should as well but currently doesn't for the default builder. A fix for that will require some additional investigation.