`loader` option in the `application` builder does not work for *.css files.
- Linguagem predominante
- TypeScript
- Estrelas
- 27k
- Forks
- 11.8k
- Merge médio
- 14h 23min
- PRs com merge (30d)
- 162
Descrição
### 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_
Guia de contribuição
Direção de pesquisa
Reproduza o problema a partir do exemplo mínimo usando angular.json, main.ts, ng build e ng serve com a configuração do .css loader. Comece rastreando como o application builder lida com CSS importado do TypeScript e, em seguida, verifique se o CSS gerado é carregado pela aplicação servida e se o comportamento é consistente tanto no modo build quanto no modo serve.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- angular, typescript
- Domínio
- build-system, frontend
- Tipo de issue
- Bug
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 42/100