Problem with styles customization?

Hey Everyone!

Before I decided to post my problem here I’v searched a lot of web pages (including posts in this forum).

I would like to customize reindeer style in my project and according to documentation I did following steps:

  1. I created folder webapp/VAADIN/themes/my_theme
  2. In this folder I put styles.css:

@import url(…/reindeer/styles.css);
$color : green;
.v-button-caption {
color: $color;

3) I provided (I think :slight_smile: ) right annotation in my main UI class like that:
4) I run project and I did not receive proper results, because everything on my page looks quite another like reindeer (like without any style).

I think…It could be problem with importing (@import url(…/reindeer/styles.css):wink: reindeer style. Maybe because I do not have in my project in themes folder upacked reindeer folder? (rather, it’s not a reason :slight_smile: ).
Did I miss something? What should I do else?

This situation drives me crazy, cuz I think It’s very easy, but I can’t find solution for quite long time ;(
Thank you very much

Hi Emil,

I think that your import should be @import url(../reindeer/legacy-styles.css); or @import "../reindeer/reindeer.scss"; instead of @import url(../reindeer/styles.css); and you should compile your theme by using java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css There are a very good article written by Marc Englund in the wiki that explains how to create a theme using SASS, you can find it at



Hey Javier!
Thanks a lot. I dit it exactly as you exaplained…I missed compilation step (And It WAS in documentation). Sorry for a little confussion and one more time thanks a lot.