angular / angular/angular-cli

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

未关闭
#24,470 14 条评论 10 个 reaction 已指派 0 人 在 GitHub 查看
area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low needs: investigation severity3: broken type: bug/fix
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

### 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

```text
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

```text
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_

贡献指南

打开贡献指南

调研方向

使用 font-awesome@4.7 和报告的 url() 引用,复现从 src/styles.scss 进行的构建。首先跟踪 angular-css-resource 的解析路径,以及 package deep imports 的处理方式;当 Angular CLI 构建能够在不出现报告中的错误的情况下解析字体资源时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, scss, typescript, webpack
领域
build-system
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。