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.