If I have a CSS file related to a custom component class (e.g. a class that extends VerticalLayout and contains other Components), what is the proper way to always include that file whenever the Component is used.
My initial thought was to use @CssImport("./styles/my-file.css") on the custom component class definition (with the file located in /frontend/styles), but that only seems to work when I run the project in development mode. In production mode, the file doesn’t appear to get bundled by the build-frontend goal (only MainLayout @CssImports are bundled??).
What is the proper way to have this CSS included without requiring users of the component to worry about including the the CSS (e.g. so that just calling new MyComponent() is enough to have the CSS included)?
From what I’ve read, it sounds like @StyleSheet may work for this, but I believe a) that would require storing the CSS in /src/main/webapp/ (I’m trying to avoid having some CSS in /frontent and some in /src/main/webapp), and b) it sounds like @StyleSheet is not recommended in Vaadin 14+ (according to the resource cheatsheet: [https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html#resource-cheat-sheet]
(http://)).
I believe UI.getCurrent().getPage().addStyleSheet() is also an option for this if the annotation approaches don’t work, though it seems like an annotation would be more elegant.
Have you ever figured this out? I’m attempting to do my first flow component as well (on vaadin 24, that is), and taking a peek at the sources of ToggleButton for Flow - Vaadin Add-on Directory it seems @CssImport should work. But it does not.
The “proper” way really depens on requirements, but The ToggleButton add-on probably is just regressed in Vaadin 24.
For a short period of time I tried to fix the add-on, but had some issues with the project (and its maintenance looks to be suspended and the add-on is not available in maven central), so forked it to Viritin as an example:
In its solution I’m using StyleSheet annotation instead of CssImport (which should work fine as well). This approach don’t include the custom styles to the “front-end bundle”, but loads the CSS dynamically if the component is used. Which is better, really depends on usage. I use this approach as now this add-on can be used with the “default bundle” → front-end build will not be triggered → apps start and build a lot faster. For best end user performance, embedding to bundle can be bit more efficient (but on the other hand can increas the amount of resources that are downloaded, even if a view that users the component is not accessed).
Viritin is an interesting library. I’ve been half baked using Vaadin, the server side coding is very alluring, especially for quick hobby projects, but it remains a niche framework. But it’s so simple to code in.
It is in.virit/viritin, use that. With org.vaadin/viritin you get an old version for Vaadin 7 or 8, which is totally incompatible and ought to exist only in the “Directory repository”, not in central.