angular / angular/angular-cli

`loader` option in the `application` builder does not work for *.css files.

未關閉
#27,433 9 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
主要語言
TypeScript
星號
27k
分支
11.8k
平均合併
14 小時 23 分鐘
30 天內合併 PR
162

描述

### 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:
```ts
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`:
```json
"loader": {
".css": "file"
}
```

`ng serve` output:
![image](https://github.com/angular/angular-cli/assets/9380964/f30a200b-9d1b-44b3-a3d3-93f39688d10d)

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:
![image](https://github.com/angular/angular-cli/assets/9380964/1eb57b73-9526-4792-8086-73fbfed60fa2)
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

```text
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

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_

貢獻指南

開啟貢獻指南

研究方向

使用 angular.json、main.ts、ng build 和 ng serve 以及 .css loader 設定,透過最小範例重現此問題。首先追蹤 application builder 對從 TypeScript 匯入的 CSS 的處理方式,然後確認產生的 CSS 已由 served application 載入,並確認在 build 和 serve 模式下行為一致。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
angular, typescript
領域
build-system, frontend
Issue 類型
缺陷
難度
3/5
預估耗時
1-2 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。