`loader` option in the `application` builder does not work for *.css files.
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 14h 23m
- Merged PRs (30d)
- 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:

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_
Contributor guide
Research direction
Reproduce the issue from the minimal example using angular.json, main.ts, ng build, and ng serve with the .css loader setting. Start by tracing the application builder's handling of CSS imported from TypeScript, then verify that the generated CSS is loaded by the served application and that the behavior is consistent for both build and serve modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100