java - Vaadin:如何自定义 Valo 主题

Question

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

@import "../valo/valo";
@import "common";
@import "views/login";
@import "views/dashboardview";
@import "views/schedule";
@import "views/sales";
@import "views/transactions";
@import "views/reports";

// Optimize the CSS output
$v-included-components: remove($v-included-components, accordion);
$v-included-components: remove($v-included-components, colorpicker);
$v-included-components: remove($v-included-components, grid);
$v-included-components: remove($v-included-components, popupview);
$v-included-components: remove($v-included-components, progressbar);
$v-included-components: remove($v-included-components, slider);
$v-included-components: remove($v-included-components, splitpanel);
$v-included-components: remove($v-included-components, tree);
$v-included-components: remove($v-included-components, treetable);
$v-included-components: remove($v-included-components, twincolselect);

// Main layout padding
$view-padding: round($v-unit-size / 1.5) !default;

// Slight adjustment to menu background-color
$valo-menu-background-color: #414B56;

@mixin dashboard {
  @include valo;
  @include dashboard-common;
  @include dashboard-login-view;
  @include dashboard-dashboard-view;
  @include dashboard-schedule-view;
  @include dashboard-sales-view;
  @include dashboard-transactions-view;
  @include dashboard-reports-view;
}

编译 SCSS 后，我得到了 styles.css 文件，我刚刚在其中为 Valo 菜单自定义了一些条目。示例:

原文:

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

定制:

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

现在如何(以及在​​哪里)定义这些规则，以便 SCSS 编译器自动接受更改？否则，每次我编译主题时，我的更改都会丢失。

问候

Answer 1

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

The actual theme should be defined as follows, as a mixin that includes the base theme.

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