java - Vaadin 主题 : java. lang.Exception:Mixin 定义:未找到 valo

Question

我正在尝试使用名为“valo”的新 Vaadin 主题。所以我创建了这个文件(如官方文档中所述)

VAADIN/themes/default/styles.scss

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

@import "../valo/valo";

.default {
    @include valo;
}

但是当我尝试使用 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

我做错了什么？ vaadin-themes-7.3.2 包已添加到依赖项中，我还在 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>

切换回驯鹿主题按预期工作。

Answer 1

我不确定您是否尝试仅使用内置主题 valo 或使用您自己的主题扩展它...

如果你想在你的应用程序中使用 valo 主题，你不需要编写 scss，只需在你的 UI 类中添加 @Theme 注释即可:

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

如果您打算编写自己的主题(例如名为 mytheme)，它扩展了 valo 主题，您必须在 VAADIN\themes dir 下创建自己的主题文件夹:

src\main\webapp\VAADIN\themes\mytheme

并在该目录中写入文件:

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;
}

样式.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
}

顺便说一句:您可以使用 Maven 原型(prototype)来创建具有主题的工作 Vaadin 应用程序项目

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