`loader` option in the `application` builder does not work for *.css files.
- 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:

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