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

[Carlosamouco]

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:

import './my-styles.css';

The built css file is never loaded into the application.
I was pointed out in #27414 that I should use the new loader however that does not seem to work.

angular.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

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


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

[alan-agius4]

This is working as expected when using the file loader. You can read more about the file loader behaviour here: https://esbuild.github.io/content-types/#file. In your case, you'd probably need to use the text file loader.

It's unclear if you are loading monaco styles yourself or it's part of the package. However, the preferred approach is to use the styles option.

"styles": [
   "monaco-editor/min/vs/editor/editor.main.css"
]

[Carlosamouco]

I expected monaco styles to be loaded as part of the package since the css bundle is being generated by esbuild.

Are these file loaders applicable for css files?

Esbuild states the following:

The bundled JavaScript generated by esbuild will not automatically import the generated CSS into your HTML page for you.

I assume this is part of the work done by vite.

[alan-agius4]

Are these file loaders applicable for css files?

Yes, but in some cases but it also varies however the CSS is being consumed.

I assume this is part of the work done by vite.

Correct, which makes it not a viable option when using ng build.

Can you please try to use the above styles option snippet?

[Carlosamouco]

Can you please try to use the above styles option snippet?

It works yes, although it does not make sense having to define a loader for a *.ttf, to create a *.css bundle that will never be loaded anywhere and that is basically the same bundle that we are adding to the styles option.

Correct, which makes it not a viable option when using ng build.

This causes a lot of confusion. Somethings work with ng serve due to vite support with prebundle=true (the default), but when building it won't.

I know importing *.css files in *.ts is not really the standard for javascript modules, but since we are using all this tools that support this use case, and at the end it does not work is a bit nonsence.

[sod]

Workaround: You can set encapsulation: ViewEncapsulation.None for your component (or create a component only for the styles) and do @import './my-styles.css'; in your components stylesheet file. Only downside is, that the css will be shipped as a .js file, but it will only be loaded and injected when the component is used.

[...] the preferred approach is to use the styles option [...]

Not if you want to have the least amount of css/javascript downloaded per page, and the styles in question are not needed everywhere.

[jharjung]

However, the preferred approach is to use the styles option.

"styles": [
   "monaco-editor/min/vs/editor/editor.main.css"
]

That works only because that particular library just so happens to provide a bundled css file that you can toss into the styles option.

What if it didn’t? Would you go track down every css file in the library and add them all?

The monaco css bundle also includes the css for every monaco feature. The css bundle produced by esbuild, but not being loaded, includes trimmed css for only those features that are actually imported/used by the application.

So what one really needs to do is write a some-library-imports.ts file, feed that into esbuild, get the css bundle, add it to the angular project as an asset, and then use the styles option. And remember to repeat that anytime the imported feature set changes or the library version is updated.

It’d be really nice if Angular just loaded that css bundle that’s already being produced by esbuild.