在我的vaadin项目中无法使用自定义主题

Question

我想在我的应用中做一些小样式，所以我尝试创建一个自定义主题。我使用IntelliJ Idea作为此项目的IDE。

我已将我的主题设置在文件夹中：web / VAADIN / themes / mytheme / styles.css 我还将valo主题从jar复制到了主题文件夹（不确定是否需要）

我在mytheme / styles.css文件中关注了css-code：

@import "../valo/styles.css";

.blackColor {
background: black;
}

在我的用户界面中，我尝试过使用setTheme（＆＃34; mytheme＆＃34;）;在类之前的init方法和注释中。

结果是，我可以将.blackColor应用于组件，但它完全忘记了valo主题。就像我的自定义主题是唯一正在使用的css文件一样。我该怎么办？

Answer 1

如果这是您第一次使用vaadin主题，则应该查看book section on themes和valo - getting started wiki页面。您将看到没有必要从jar中复制主题，您只需要继承/扩展它。

假设您正在阅读本书中的示例，那么您的样式将为mytheme.scss：

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

@mixin mytheme {
  @include valo;

  .blackColor {
    background: black;
  }
}

styles.scss

@import "mytheme.scss";


.mytheme {
  @include mytheme;
}

在此之后，只需使用主题名称注释您的UI：

@Theme("mytheme")
public class MyUI extends UI {
...
}

根据这本书，请注意

  

如果文件夹中不存在styles.css，则编译Sass文件   在浏览器请求主题时即时。

注意：您可以找到一些自定义valo变量here的好例子。