`loader` option in the `application` builder does not work for *.css files.
還沒有人認領這個 Issue。
評估
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 新手友好度
- 42/100
- Issue 類型
- 缺陷
- 描述清晰度
- 基本清楚
- 活躍度
- 停滯
- 技術堆疊
- angular, typescript
- 領域
- build-system, frontend
研究方向
使用 angular.json、main.ts、ng build 和 ng serve 以及 .css loader 設定,透過最小範例重現此問題。首先追蹤 application builder 對從 TypeScript 匯入的 CSS 的處理方式,然後確認產生的 CSS 已由 served application 載入,並確認在 build 和 serve 模式下行為一致。
由索引模型根據 Issue 內容生成。
描述
Command
build, serve
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
When trying to import a *.css file inside a *.ts with the following syntax:
import './my-styles.css';
The built css file is never loaded into the application.
I was pointed out in https://github.com/angular/angular-cli/issues/27414 that I should use the new loader however that does not seem to work.
angular.json:
"loader": {
".css": "file"
}
ng serve output:
This would be useful in order to support third party libraries that use this kind of imports like monaco-editor.
Vite already handles this when we run ng serve --prebundle=true and it works when a library uses this imports, but it does not work with ng build or ng serve --prebundle=false.
Also esbuild is able to handle the import (https://esbuild.github.io/content-types/#css-from-js) and generate a css bundle for all the css imports that it finds in a entry point, for example I can see it generating a main.css file:
However, the css bundle outputted to the ./dist/** folder it is never loaded onto the app.
Minimal Reproduction
ng new my-app
cd ./my-app
Create a *.css file called "import-styles.css"
Import the file above into the main.ts or other *.ts file of the app.
ng serve
Exception or Error
No response
Your Environment
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 17.3.3
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64
Angular: 17.3.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.3
@angular-devkit/build-angular 17.3.3
@angular-devkit/core 17.3.3
@angular-devkit/schematics 17.3.3
@schematics/angular 17.3.3
rxjs 7.8.1
typescript 5.4.4
zone.js 0.14.4
Anything else relevant?
No response
- 主要語言
- TypeScript
- 星號
- 27k
- 分支
- 11.8k
- 平均合併
- 17 小時 21 分鐘
- 30 天內合併 PR
- 181
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
angular/angular-cli 的其他 Issue
-
area: @angular/build gemini-triaged
難度 2/5 1-3 小時 新手友好度 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
難度 2/5 1-3 小時 新手友好度 72/100
angular/angular-cli#33055 · 1 則留言 · 3 個 reaction ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 已指派 1 人 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 已指派 1 人 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34128 · 已指派 1 人 ·
查看 angular/angular-cli 的全部 Issue
相似的 Issue
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) 未關閉
難度 2/5 1-3 小時 新手友好度 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
難度 2/5 1-3 小時 新手友好度 75/100
-
難度 2/5 1-3 小時 新手友好度 65/100
-
難度 1/5 1 小時以內 新手友好度 85/100
-
Mend: dependency security vulnerability untriaged
難度 2/5 1-3 小時 新手友好度 70/100