esbuild "Could not resolve bootstrap-icons.woff2?###" [plugin angular-css-resource]

[whyboris]

Which @angular/* package(s) are the source of the bug?

compiler-cli, compiler, Don't known / other

Is this a regression?

No

Description

Error only happens when I use the esbuild 👌

"builder": "@angular-devkit/build-angular:browser-esbuild",

Error:

✘ [ERROR] Could not resolve "./fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47" [plugin angular-css-resource]

    src/styles.scss:11982:11:
      11982 │   src: url("./fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f9...

When running the same exact repository without esbuild:

"builder": "@angular-devkit/build-angular:browser",

No error happens.

Please provide a link to a minimal reproduction of the bug

n/a

Please provide the exception or error you saw

✘ [ERROR] Could not resolve "./fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47" [plugin angular-css-resource]

    src/styles.scss:11982:11:
      11982 │   src: url("./fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f9...

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 16.0.0
Node: 18.12.1
Package Manager: npm 9.6.6
OS: darwin arm64

Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@angular/material               14.2.7
@schematics/angular             16.0.0
rxjs                            7.8.1
typescript                      5.0.4

Anything else?

In package.json I have:

    "bootstrap": "5.2.3",
    "bootstrap-icons": "1.10.5",

In angular.json under the build.options I also have:

"styles": [
        "./node_modules/bootstrap/scss/bootstrap.scss",
        "src/styles.scss"
      ],
"scripts": ["./node_modules/bootstrap/dist/js/bootstrap.bundle.js"]

In my styles.scss I have these imports:

@import "bootstrap";
@import "../node_modules/bootstrap-icons/font/bootstrap-icons";

I'm sorry I'm unsure what of what I list above is relevant to the error I'm seeing.

[clydin]

The styles.scss file can be changed to the following:

@import "bootstrap";
@import "bootstrap-icons";

This will work for both the default and esbuild-based build system and avoids direct reliance on the presence of a node_modules directory.

The relative bootstrap path in the styles option should also be able to be removed as it is already present in the styles.scss file. Duplicate bootstrap styles are most likely present in the final application output with both present.

[clydin]

If you are still encountering issues after making the above suggested change, please let us know.

[whyboris]

🙇 thank you @clydin - the import statement change in the scss file fixed the problem I was facing ✅

And you're right about being able to remove bootstrap from the architect.build.options.styles 🚀

[AStoker]

Potentially a related issue. I'm having a very similar error, but rooted in the font import from fontawesome.
We import the file like this: @import '@fortawesome/fontawesome-pro/scss/regular';
Inside that file there's a font face declaration like this

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
}

The variable $fa-font-path is set to "../webfonts", which in relation to the regular.scss file, has the correct file there.

However, in the build process, I'm getting this error:

✘ [ERROR] Could not resolve "../webfonts/fa-solid-900.woff2" [plugin angular-css-resource]

    theme/company-file.scss:63105:11:
      63105 │   src: url("../webfonts/fa-solid-900.woff2") format("woff2"), u...

Now, the only thing I can think of is that if that url is parsed BEFORE it's imported into base scss file (company-file), then the URL is correct. But if it's parsed after the original import is completed, than that url is not correct.
Thoughts on how to resolve this correctly?

As a note, this came up after upgrading to Angular 16 and trying the new experimental ESBuild

[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.}