Open Carlosamouco opened 6 months ago
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 yoursleve 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"
]
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.
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?
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.
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.
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.
Command
build, serve
Is this a regression?
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:
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
: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 withng build
orng 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 amain.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
Anything else relevant?
No response