Webpack sometimes does not properly resolve `url()` resources from package deep imports
- Ngôn ngữ chính
- TypeScript
- Star
- 27k
- Fork
- 11.8k
- Merge trung bình
- 14 giờ 23 phút
- Pull request đã merge (30 ngày)
- 162
Mô tả
### 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_
Hướng dẫn đóng góp
Hướng nghiên cứu
Tái hiện bản build từ src/styles.scss bằng font-awesome@4.7 và các tham chiếu url() đã được báo cáo. Bắt đầu bằng cách lần theo đường dẫn phân giải của angular-css-resource và cách xử lý các package deep imports; hoàn tất khi bản build của Angular CLI phân giải được các tài nguyên font mà không gặp các lỗi đã báo cáo.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, scss, typescript, webpack
- Lĩnh vực
- build-system
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100