CODEWITHSUNDEEP
javamavensassvaadinvaadin7
vralfy
vralfy

Reputation: 324

Vaadin Themes: java.lang.Exception: Mixin Definition: valo not found

i'm trying to use the new Vaadin theme called "valo". So I created this file (as described in the official documentation)

VAADIN/themes/default/styles.scss

$v-background-color: hsl(200, 50%, 50%);

@import "../valo/valo";

.default {
    @include valo;
}

But when I try to compile the application with maven:

[INFO] --- vaadin-maven-plugin:7.3.2:compile-theme (default) @ de.balindoo.theme.balindoo ---
[INFO] Updating theme VAADIN\themes\default
[ERROR] java.lang.Exception: Mixin Definition: valo not found
[ERROR]     at com.vaadin.sass.internal.visitor.MixinNodeHandler.replaceMixins(MixinNodeHandler.java:40)
[ERROR]     at com.vaadin.sass.internal.visitor.MixinNodeHandler.traverse(MixinNodeHandler.java:33)
[ERROR]     at com.vaadin.sass.internal.tree.MixinNode.traverse(MixinNode.java:117)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:271)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:280)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:187)
[ERROR]     at com.vaadin.sass.SassCompiler.main(SassCompiler.java:57)
[INFO] Theme "VAADIN\themes\default" compiled

What am I doing wrong? The vaadin-themes-7.3.2 packages is added to the dependencies and I also added the following plugin in the build section of my pom.xml

<plugin>
  <groupId>com.vaadin</groupId>
  <artifactId>vaadin-maven-plugin</artifactId>
  <version>${version.vaadin.plugin}</version>
  <configuration>
    <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
    <noServer>true</noServer>
    <webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets</webappDirectory>
    <hostedWebapp>${basedir}/src/main/webapp/VAADIN/widgetsets</hostedWebapp>
    <!-- Remove draftCompile when project is ready -->
    <draftCompile>false</draftCompile>
    <compileReport>true</compileReport>
    <style>OBF</style>
    <strict>true</strict>
  </configuration>
  <executions>
    <execution>
      <goals>
        <!--<goal>clean</goal>-->
        <goal>resources</goal>
        <goal>update-widgetset</goal>
        <goal>compile</goal>
        <goal>update-theme</goal>
        <goal>compile-theme</goal>
      </goals>
    </execution>
  </executions>
</plugin>

Switching back to reindeer theme works as expected.

Upvotes: 0

Views: 3287

Answers (3)

herman
herman

Reputation: 12305

I'm using

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

to import and that works fine. I think the .scss extension should be optional in theory but I'm not sure if Vaadin's SCSS compiler requires it or not.

Upvotes: 0

vralfy
vralfy

Reputation: 324

I just copied the whole build section from this pom file: https://github.com/vaadin/valo-demo/blob/master/pom.xml

after that everything works fine

Upvotes: 0

Ari Vanajoki
Ari Vanajoki

Reputation: 11

I'm not sure are you trying to just use build in theme valo or extend it with your own theme...

If you want to use valo theme in your app you don't need to write scss just add @Theme annotation to your UI class:

@Theme("valo")
@SuppressWarnings("serial")
public class MyVaadinUI extends UI
{.....

If you are planning to write your own theme (named eg mytheme), which extends valo theme you have to create own theme folder under VAADIN\themes dir : 

src\main\webapp\VAADIN\themes\mytheme

and write files in that dir:

mytheme.scss

@import "addons.scss";
@import "mytheme.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts 
with other themes.           */
/* The actual styles should be defined in mytheme.scss */
.mytheme {
@include addons;

  // Include mytheme theme styles in your theme
  @include mytheme;
}

styles.scss

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family......
//$v-font-size: 16px;
//$v-font-family: "Open Sans", sans-serif;


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

@mixin mytheme {
  @include valo;
  // Insert your own theme rules here
}

BTW: You can use maven archetype to create working Vaadin app project with theme 

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype- application -DarchetypeVersion=7.3.2 -Dpackaging=war

Upvotes: 1

Related Questions