Vaadin custom css

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: