I created a new Hilla React / Springboot project and want to build a custom theme using SCSS. I would like to perform modifications to the out-of-box Lumo theme as well as integrating Bootstrap styles and components by including the Bootstrap scss. Unfortunately, I cannot find any recent information about how to use sass in Hilla (only a little but incomplete information relating to Vaadin 7). I'd appreciate some hints on
- where to I place the custom style sass files (frontend/themes/<mytheme>/??) -- answered -> see below
- how do I configure the sass parser/css generator? It looks like css files are automatically generated, but they are placed underneath the sass file and thus are not automatically recognized by Hilla -> answered: no configuration required, once sass is a development dependencies (in packages.json)
- how can I make use of the Bootstrap css files? I added a Bootstrap dependency to package.json but I am uncertain whether this is the correct approach.
Update: I now figured out how to use sass in the Hilla project (once you know its easy ;-) ):
name the sass file e.g. themes/my-theme/my-styles.scss, then add the following line to styles.css:
@import "my-styles.scss";
Hilla uses Vite for frontend builds, so that way it is directly linked. I.e. you need to have Vite plugin for SASS. Note Bootstrap css does not work with Vaadin components though, as the styles do not propagate to their Shadow DOM. You can use Bootstrap only with native HTML elements. There seems to be SO Q&A about setting up SASS Vite plugin here stackoverflow.com/a/66515810/8962195