angular / angular/angular-cli

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

Ouverte
#27,433 9 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
14 h 23 min
PR mergées (30 j)
162

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Reproduisez le problème à partir de l’exemple minimal en utilisant angular.json, main.ts, ng build et ng serve avec la configuration du .css loader. Commencez par retracer la gestion par l’application builder du CSS importé depuis TypeScript, puis vérifiez que le CSS généré est chargé par l’application servie et que le comportement est cohérent à la fois en mode build et en mode serve.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
build-system, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.