`loader` option in the `application` builder does not work for *.css files.
まだ誰も着手していません。
評価
- 難易度
- 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 が serve されたアプリケーションによって読み込まれること、そして 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
- 平均マージ
- 16時間 35分
- マージ済み PR(30日)
- 176
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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 件 ·
-
area: @angular/build gemini-triaged
難易度 4/5 3〜5日 初心者へのやさしさ 72/100
angular/angular-cli#34137 ·
-
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/angular-cli の issue をすべて見る
似ている issue
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
dennys-bd/agent-hive#184 ·
-
Add: hunch オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
AbdelStark/awesome-typesafe#104 ·
-
ai-observability bug team/ai-observability
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
vicharanashala/fln#563 ·