I have had some limtied experience with Vaadin 6 a few months ago and now looking at a new project which requires vaadin and considering using Vaadin 7. I am trying to get themeing to work in Vaadin 7. I have annoted the UI class with @Theme. I have added a themes/newtheme folder to the VAADIN directory and created a style.scss file with the following demo classes: (my understanding is sass will get applied automatically.
I am using maven and created the required folders etc. by hand after generating a quick start maven project. My VAADIN folder is located under /src/main/webapp/VAADIN and not a WebContent folder I see referenced in online documentation, don’t know if this makes a difference? Vaadin libraries and the widget sets are picked up when the application is run, just no styles are applied.
In the generated war file I can see the VAADIN directory together with the themes directory is included as follows /VAADIN/themes/ - i.e in the root of the war file. Is this all correct? Why is my css not being applied?
The paths are a bit different in Maven than in Eclipse, which has the “[tt]
WebContent
[/tt]” directory. Nevertheless, the [tt]
VAADIN
[/tt] directory is supposed to be copied to the root of the WAR package, so that’s probably correct.
As far as I know, the Sass compilation is still under work and the on-the-fly compilation doesn’t work properly. You would have to use the Sass compiler manually, which is probably a bit awkward. There’s currently no instructions for using it manually (need to write those). It’s included in the [tt]
theme-compiler
[/tt] JAR and you need to run the class
com.vaadin.sass.SassCompiler . It takes the input SCSS and output CSS file names as parameters. Running it requires some dependencies in the classpath.
Sorry, the on-the-fly compilation of SCSS themes should work just fine. Just have the SCSS file as [tt]
src/main/webapp/VAADIN/themes/yourtheme/styles.scss
[/tt], use @Theme(“yourtheme”) in the UI class and it should work OK.
As far as I understood, the problem only occurs if you compile one monolithic CSS file from your own SCSS + Vaadin theme SCSS. That is, if you import the styles.scss of the Vaadin base theme. If you import the styles.css, for example …/reindeer/styles.css, it should work ok.
Just importing reindeer.scss is
not supposed to work unless you also include the mix-in within a suitable theme name block (see the tutorial). Otherwise, you should import reindeer legacy-styles.css instead.