Question

我是SCSS的新手，我问自己如何在Vaadin应用程序中自定义Valo主题。我阅读了Vaadin书中的主题，但我找不到一个例子。我的样式结构基于official Vaadin dashboard demo：

.mytheme .v-menubar-user-menu  > .v-menubar-menuitem img.v-icon {
    width: 56px;
    height: 56px;

    border-radius: 29px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
    display: block;
    margin: 0 auto 0.3em;
    border: 1px solid #c5c5c5;
}

编译完SCSS后，我得到了styles.css文件，我只为Valo菜单定制了几个条目。例如：

原始

.mytheme .v-menubar-user-menu  > .v-menubar-menuitem img.v-icon {
    width: 69px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
    display: block;
    margin: 0 auto 0.3em;
    border: 1px solid #c5c5c5;
}

定制

fexpect

现在我可以如何（以及在何处）定义这些规则，以便SCSS编译器自动获取更改？否则每次我编译主题时我的更改都会丢失。

此致

Answer 1

正如Book of Vaadin中所述，您在mixin的末尾添加了自己的代码。

实际主题应定义如下，作为包含基本主题的mixin。
@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  /* An actual theme rule */
  .v-button {
    color: blue;
  }
}

在你的情况下，有些东西：

@mixin dashboard {
  // ...
  .v-menubar-user-menu  > .v-menubar-menuitem img.v-icon {
     width: 69px;
     height: auto;
  }
}

Vaadin：如何定制Valo主题

1 个答案: