2

我很难将 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 吗？

4

2 回答 2

1

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

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

.wastecentertheme {
  @include valo;
  @include addons;
}
于 2017-08-09T07:58:02.627 回答
1

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 的默认设置包括主主题的插件mixin。样式.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。

于 2017-08-10T06:45:18.913 回答