Question

我试图使用名为＆＃34; valo＆＃34;的新Vaadin主题。所以我创建了这个文件（如官方文档中所述）

VAADIN /主题/默认/ 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的build部分添加了以下插件

<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

我不确定你是否只是想在主题值中使用build或者用你自己的主题扩展它......

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

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

如果您打算编写自己的主题（例如命名为mytheme），则必须扩展valo主题在VAADIN \ themes目录下创建自己的主题文件夹：

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

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
}

顺便说一句：您可以使用maven archetype创建主题为

的工作Vaadin应用程序项目

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

Answer 2

我刚从这个pom文件中复制了整个构建部分： https://github.com/vaadin/valo-demo/blob/master/pom.xml

之后一切正常

Answer 3

我正在使用

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

导入，工作正常。我认为.scss扩展在理论上应该是可选的，但我不确定Vaadin的SCSS编译器是否需要它。

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

3 个答案: