Vaadin: Как настроить тему Valo

Question

Я новичок в SCSS, и я спрашиваю себя, как настроить тему Valo в приложении 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; 
} 

Customized:

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

Настоящая тема должна быть определена следующим образом, как смесь, включающая базовую тему.

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