css - 无法在我的 vaadin 元素中使用自定义主题

Question

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

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

我在 mytheme/styles.css 文件中遵循了 css 代码:

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

.blackColor {
background: black;
}

在我的用户界面中，我尝试使用 setTheme("mytheme");在类之前的 init 方法和注释中。

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

Answer 1

如果这是您第一次使用 vaadin 主题，您应该看看 book section on themes和 valo - getting started维基页面。您将看到不需要从 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 {
...
}

根据本书，请注意

If no styles.css exists in the folder, the Sass file is compiled on-the-fly when the theme is requested by a browser.

注意:您可以找到一些自定义 valo 变量的不错示例 here .