Vaadin custom css - vaadin

Question

I have problem with custom CSS with Vaadin. Everything is ok if I declare in my MainUI.java file the following:
#Theme("valo")
#SpringUI
public class MainUI extends UI {
...
If I add my new theme, it doesn't get picked up. In my project folder in Eclipse I executed:
Project->New->Other->Vaadin Theme
After that I have in my MainUI.java file:
#Theme("myCustomTheme")
#SpringUI
public class MainUI extends UI {
...
I see only plain text after I refresh my page :/
My template file:
#import "../valo/valo.scss";
#mixin myCustomTheme {
#include valo;
// Insert your own theme rules here
}
What should I do so that I have a Valo-based theme where I could change some css rules?

Answer 1

You need the Vaadin Maven plugin:
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
<!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
<goal>compile-theme</goal>
</goals>
</execution>
</executions>
</plugin>
Then, you can just click this button in Eclipse: