Hacktoberfest 2026:維護者為十月標記出來的 issue,仍然開放、適合新手。 瀏覽 Hacktoberfest issue

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

未關閉
#27,433 9 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

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

研究方向

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

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

描述

angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
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:
image

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

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

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

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