I can't get a custom theme to work while using Spring Boot + Vaadin 8 and I

Hello,

I can’t get a custom theme to work while using Spring Boot + Vaadin 8 and IntelliJ Idea + Gradle.

I’ve first tried with a simple CSS file:
src/main/webapp/VAADIN/themes/mytheme/styles.css
containing just:

@import "../valo/styles.css"; .my-split { background: #a983ff; } I’ve annotated my UI class with
@Theme(“mytheme”)
and I’ve set the style name on my component:
gridsSplitPane.addStyleName(“my-split”);

But when I run my app it seems that the
mytheme
gets loaded because the background is changed correctly but everything else has no CSS styling - as if the import line didn’t work:
@import “…/valo/styles.css”
.

What am I missing here?

When I use
@Theme(“valo”)
instead - everything is loaded correctly, so I’m guessing that all the Valo theme files are loaded correctly from:
vaadin-themes-8.1.0.jar!/VAADIN/themes/valo/…

I’ve tried also creating
styles.scss
containing just:

@import "../valo/styles.scss"; @mixin mytheme { @include valo; .my-split { background: #a983ff; } } as suggested in Vaadin documentation, and compiled with:

java -cp vaadin-sass-compiler-0.9.13.jar;vaadin-themes-8.1.0.jar;. com.vaadin.sass.SassCompiler src/main/webapp/VAADIN/themes/mytheme/styles.scss src/main/webapp/VAADIN/themes/mytheme/styles.css but had no luck with that too. Although the
styles.css
file gets generated successfully and it seems to have the desired content, the whole page still displays as if there was no styling for it…

Please see some more details (SSCCE)
in stack overflow question
.

Attaching generated CSS file…

If I don’t compile SCSS and want to uilize on-the-fly generation it is not working too and I’m getting standard error output:

Sep 13, 2017 9:08:22 AM org.atmosphere.util.IOUtils guestRawServletPath
WARNING: More than one Servlet Mapping defined. WebSocket may not work org.apache.catalina.core.ApplicationServletRegistration@1c42f01

35306.css (328 KB)

Hi Al Wi,
I had the same problem. It works for me when placing the themes in the folder srv/main/wenapp/VAADIN/themes/mytheme of my maven project.

styles.scss
//@import “/VAADIN/theme/valo/styles.css”;
@import “…/valo/valo”;
@import “panacee.scss”;

panacee.scss
.panacee {
@include valo;
}
.dashboard-stat {
margin-bottom: 25px;
}

Hi Al Wi,
I had the same problem. It works for me when placing the themes in the folder srv/main/wenapp/VAADIN/themes/mytheme of my maven project.

styles.scss
//@import “/VAADIN/theme/valo/styles.css”;
@import “…/valo/valo”;
@import “panacee.scss”;

panacee.scss
.panacee {
@include valo;
}
.dashboard-stat {
margin-bottom: 25px;
}