如何在我的主题中包含使用 Vaadin 电子表格所需的 css？

Question

我很难让 Vaadin 电子表格的 css（更具体地说是 scss）包含在我的项目主题中。

我要像这样添加到 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

有什么想法吗？也许我需要从 Vaadin-Spreadsheet 的 .jar maven 导入中获取 .scss 并将其副本拖放到我的目录中并同时执行 @import?

Answer 1

答案似乎是 Vaadin 以某种方式自动生成了一个插件文件，您应该将其作为重要指令包含在 .scss 中。这确实应该更清楚地记录下来。

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

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

Answer 2

addons.scss 是一个由 Vaadin 通过 Maven 目标管理的文件。如果某些附加组件有 css 需要包含在主题中，那么 Maven 目标将在主题编译时自动将其包含在 addons.scss 中。它被拆分成一个自己的文件，以便可以在任何时间点覆盖它，并且不应手动编辑它。在将电子表格依赖项添加到 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 的默认设置包括主主题的插件混合。 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.

如何在我的主题中包含使用 Vaadin 电子表格所需的 css？

How do I include the css required to use Vaadin spreadsheet in my theme?

vaadin

vaadin-themes