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?

Have you compiled the theme? Do you get errors in the server log? — cfrick, Aug 10 '17 at 11:59
The common approach is to run a task from your buildtool where you added some sort of plugin for vaadin, that can deal with that. — cfrick, Aug 10 '17 at 12:30
Also, please take a look at the [doc sections regarding themes](https://vaadin.com/docs/-/part/framework/themes/themes-overview.html) — Morfic, Aug 10 '17 at 12:36

score 0 · Answer 1 · answered Aug 11 '17 at 15:35

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:

Vaadin custom css

1 Answers1