Problem compiling Valo theme

Flow
1

Hey all, I’ve been using the default valo theme for a while but it’s time to get some custom look going. I’m having no luck compiling a new theme though. I wasn’t able to get the Compile Theme button working in Eclipse, so I’m using maven on the command line:

mvn vaadin:compile-theme

This gives the following error[code]
ERROR] Oct 21, 2014 11:47:48 AM com.vaadin.sass.internal.visitor.ImportNodeHandler traverse
[ERROR]
SEVERE: null
[ERROR]
com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file _valo.scss
[ERROR]
Encountered “contains(” at line 21, column 5.
[ERROR]
Was expecting one of:
[ERROR]
…
[ERROR]
“{” …
[ERROR]
“=” …
[ERROR]
“+” …
[ERROR]
“-” …
[ERROR]
“>” …
[ERROR]
“<” …
[ERROR]
“/” …
[ERROR]
“*” …
[ERROR]
“(” …
[ERROR]
“)” …
[ERROR]
“==” …
[ERROR]
“||” …
[ERROR]
“&&” …
[ERROR]
“!=” …
[ERROR]
…
[ERROR]
…
[ERROR]
…
[ERROR]

[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:187)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:116)
[ERROR]
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:60)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.importOtherFiles(ScssStylesheet.java:257)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:250)
[ERROR]
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:57)
[ERROR]

[ERROR]
Oct 21, 2014 11:47:48 AM com.vaadin.sass.internal.visitor.ImportNodeHandler traverse
[ERROR]
SEVERE: null
[ERROR]
com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file _valo.scss
[ERROR]
Encountered “contains(” at line 21, column 5.
[ERROR]
Was expecting one of:
[ERROR]
…
[ERROR]
“{” …
[ERROR]
“=” …
[ERROR]
“+” …
[ERROR]
“-” …
[ERROR]
“>” …
[ERROR]
“<” …
[ERROR]
“/” …
[ERROR]
“*” …
[ERROR]
“(” …
[ERROR]
“)” …
[ERROR]
“==” …
[ERROR]
“||” …
[ERROR]
“&&” …
[ERROR]
“!=” …
[ERROR]
…
[ERROR]
…
[ERROR]
…
[ERROR]

[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:187)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:116)
[ERROR]
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:60)
[ERROR]
at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:82)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:326)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:335)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:252)
[ERROR]
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:57)
[ERROR]

[ERROR]
Oct 21, 2014 11:47:48 AM com.vaadin.sass.internal.tree.NodeWithVariableArguments traverse
[ERROR]
SEVERE: null
[ERROR]
java.lang.Exception: Mixin Definition: valo not found
[ERROR]
at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:37)
[ERROR]
at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:30)
[ERROR]
at com.vaadin.sass.internal.tree.MixinNode.doTraverse(MixinNode.java:66)
[ERROR]
at com.vaadin.sass.internal.tree.NodeWithVariableArguments.traverse(NodeWithVariableArguments.java:203)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:326)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:335)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:335)
[ERROR]
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:252)
[ERROR]
at com.vaadin.sass.SassCompiler.main(SassCompiler.java:57)
[ERROR]

[/code]

The theme does compile but then my style.css file is mostly empty. I have been unsuccessful at recompiling the theme without any customizations, etc. so can’t even get back to what I had before.

My style.scss looks like this:

[code]
@import “_valo.scss”;

.valo {
@include valo;
}
[/code]Please help!
2

Hi, by style.scss, did you mean styles.scss or possibly your own .scss file (your own theme) that styles.scss imports?

In your themes folder, you should at least have the styles.scss and then it is good practice to import your own theme from there:

styles.scss:

@import "yourtheme.scss";

.testvaadin7removethistheme {
  @include yourtheme;
}

And yourtheme.scss:

@import "../valo/valo.scss";

@mixin testvaadin7removethistheme {
  @include valo;
}

To use your theme, annotate your UI with:

@Theme("yourtheme")
3

I’ve tried to start with the two files as you have suggested, but the compiler still fails with the same error. It seems like perhaps the compiler expects a different kind of file when encountering valo.scss.

I am stuck because I’m unfamiliar with how the compiler is works or what kind of files it expects. So far I have not found any other information other than the help guides at: https://vaadin.com/book/-/page/themes.sass.html

When I try the Eclipse method to compile the theme, it just gives an error: “Select a theme file (.scss) or a Vaadin project to compile.” Despite having the files open or project/files selected in the explorer it never works.

4

It seems as though the version of Vaadin I was using was broken. I upgraded to 7.4.0 beta to gain access to some features mentioned in another thread. (which didn’t appear to actually be there) This seemed to be causing the trouble. I changed back to 7.3.5 and the compiler for the SCSS seems to work.