Vaadin Components Styling

Vaadin 6 / 7 / 8
1

Hello everyone. I’m new to vaadin and currently working with a project which has been build on Vaadin 7.
I am having a hard time finding information how css styling actually works inside of it.
Let’s say I have a Label component, which I would like to style:

Label.addStyleName(“myownstyle”);

And I have my style like this:
.myownstyle {
font-family: fantasy;
font-style: italic;
font-size: 25px;
}

Where should I store my css code then?
anywhere in the resource folder? Or in some specific css file like vaadinstyle.css?
Should I write a path to this file somewhere?

2

I would recommend you to check this one

https://vaadin.com/training/courses/theming-with-valo

It is for Vaadin 8, but things are the same with Vaadin 7 (with exception that in Vaadin 7 you can use also Reindeer theme in addition to Valo).

3

Ok, I guess I found the answer:
There are VAADIN.themes folder which contains styles.scss, which has all the custom styles that has been used by other developer in this application.
Thank you for your help!

4

I guess I’m still missing part of this puzzle. How do I rebuild .scss file to apply changes without rebuilding the whole project?