Currently I @import a CSS file in styles.css from the same directory.
@import url('./mystyles.css');
Now I’d like to move that CSS file to a separate JAR where I’ve put it into src/main/resources/META-INF/resources/frontend. But then the @import doesn’t work anymore because it can’t find the file.
I noticed the file is copied to src\main\frontend\generated\jar-resources in the application project. Using this path the @import works again, but that’s a bit cumbersome. Is there a way, to teach @import to also use jar-resources as a source folder?
The @CssImport annotation already seems to look there, but I’d like to keep that @import in styles.css.
Thank you, and I have already read that. But I’m not trying to create a reusable theme, but a set of style sheets that you may or may not include in your theme. In that regard it’s more akin to what compact.js does, just as a CSS file.
Currently, relative paths in styles.css are already resolved for the project root and relative to where your styles.css is. So it’s not far fetched to assume that there could be a way to also add src\main\frontend\generated\jar-resources. Probably somewhere in the Vite configuration.
Anyway, I just figured out that the following also works:
My understanding is that if you follow that documentation, all the styles in your JAR will be loaded by Vaadin frontend and you do not need to add that import at all. The styles will be applied without it.
Yes, you are correct, but like I said, that’s not what I’m looking for. These CSS files are optional, like what your compact.js does.
Regardless, thank you for your feedback. The solution with @vaadin/flow-frontend is good enough for me.