angular / angular/angular-cli

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

Abierto
#27,433 9 comentarios 0 reacciones 0 asignados Ver en GitHub
angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
14 h 23 min
PR fusionados (30 d)
162

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduzca el problema a partir del ejemplo mínimo usando angular.json, main.ts, ng build y ng serve con la configuración del .css loader. Empiece rastreando cómo el application builder gestiona el CSS importado desde TypeScript y, después, verifique que la aplicación servida cargue el CSS generado y que el comportamiento sea coherente tanto en el modo de build como en el de serve.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
build-system, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.