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 摘要。