Как мне включить css, необходимый для использования таблицы Vaadin в моей теме?

Question

Мне трудно получить CSS (точнее, scss) для таблицы Vaadin, которая будет включена в тему моего проекта.

Должен ли я добавить это как это в styles.scss?

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

.wastecentertheme {
  @include valo;
}

@mixin addons {
  @include spreadsheet;
}

Или это так?

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

.wastecentertheme {
  @include valo;

  @mixin addons {
    @include spreadsheet;
  }

}

Первый компилируется, но выходной файл.css не имеет каких-либо обязательных правил. Второй разрывается с этим сообщением...

[INFO] --- vaadin-maven-plugin:8.1.1:compile-theme (default) @ portal ---
[INFO] Updating theme VAADIN/themes/base
[INFO] Theme "VAADIN/themes/base" compiled
[INFO] Updating theme VAADIN/themes/valo
[INFO] Theme "VAADIN/themes/valo" compiled
[INFO] Updating theme VAADIN/themes/wastecentertheme
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR] SEVERE: Error when parsing file 
[ERROR] /usr/local/code/Waste Center/src/main/webapp/VAADIN/themes/wastecentertheme/styles.scss on line 4, column 17
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler log
[ERROR] SEVERE: encountered "@mixin". Was expecting one of: "}" "+" "-" ";" ">" "~" "[" "*" "%" "&" "." "and" "or" "not" ":" "#{" "through" "in" "@include" "@debug" "@warn" "@for" "@each" "@while" "@if" "@extend" "@content" <MICROSOFT_RULE> <IDENT> <VARIABLE> <HASH> "@import" "@media" <KEY_FRAME_SYM> <ATKEYWORD> 
[ERROR] org.w3c.css.sac.CSSParseException: encountered "@mixin". Was expecting one of: "}" "+" "-" ";" ">" "~" "[" "*" "%" "&" "." "and" "or" "not" ":" "#{" "through" "in" "@include" "@debug" "@warn" "@for" "@each" "@while" "@if" "@extend" "@content" <MICROSOFT_RULE> <IDENT> <VARIABLE> <HASH> "@import" "@media" <KEY_FRAME_SYM> <ATKEYWORD> 
[ERROR]     at com.vaadin.sass.internal.parser.Parser.reportError(Parser.java:418)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.styleRule(Parser.java:2203)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.topLevelDeclaration(Parser.java:591)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parserUnit(Parser.java:487)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parseStyleSheet(Parser.java:122)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:172)
[ERROR]     at com.vaadin.sass.SassCompiler.main(SassCompiler.java:92)
[ERROR] 
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler warn
[ERROR] WARNING: Warning when parsing file 
[ERROR] /usr/local/code/Waste Center/src/main/webapp/VAADIN/themes/wastecentertheme/styles.scss on line 8, column 4
[ERROR] Aug 09, 2017 1:36:31 AM com.vaadin.sass.internal.handler.SCSSErrorHandler warn
[ERROR] WARNING: Skipping: }
[ERROR] org.w3c.css.sac.CSSParseException: Skipping: }
[ERROR]     at com.vaadin.sass.internal.parser.Parser.reportWarningSkipText(Parser.java:434)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.topLevelDeclaration(Parser.java:618)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parserUnit(Parser.java:487)
[ERROR]     at com.vaadin.sass.internal.parser.Parser.parseStyleSheet(Parser.java:122)
[ERROR]     at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:172)
[ERROR]     at com.vaadin.sass.SassCompiler.main(SassCompiler.java:92)
[ERROR] 
[ERROR] Compiling theme "VAADIN/themes/wastecentertheme" failed

Есть идеи? Может быть, мне нужно взять.scss из импорта.jar maven для Vaadin-Spreadsheet и поместить его копию в мой каталог, а также сделать @import?

Answer 1

addons.scss - это файл, который управляется Vaadin через цели Maven. Если у некоторого дополнения есть css, который необходимо включить в тему, то цель maven автоматически включит его в addons.scss после компиляции темы. Он разбит на собственный файл, чтобы его можно было перезаписать в любой момент времени, и его нельзя редактировать вручную. После добавления зависимости Spreadsheet в ваш pom.xml и запуска, например, mvn install, addons.scss должен выглядеть так:

/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */

/* Provided by vaadin-spreadsheet-2.0.1.jar */
@import "../../../VAADIN/addons/spreadsheet/spreadsheet.scss";


/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
    @include spreadsheet;
}

тогда настройка по умолчанию styles.scss включает mixin аддонов в основную тему. styles.scss:

@import "addons.scss";
@import "apptheme.scss";
@import "designs.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in apptheme.scss */
.apptheme {
  @include vaadin-crud-template;
  @include addons;
  @include apptheme;
}

Не то, чтобы дизайн шаблона Designer обрабатывался так же, как и designs.scss. Пользовательские scss разработчика входят в apptheme.scss.

Answer 2

Похоже, ответ заключается в том, что Vaadin каким-то образом автоматически сгенерировал файл аддонов, который вы должны включить в качестве важной и включающей директивы в.scss. Это действительно должно быть задокументировано более четко.

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

.wastecentertheme {
  @include valo;
  @include addons;
}