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中包含一个重要的以及include指令。应该更清楚地记录下来。

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

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

Answer 2

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的默认设置包括主要主题的插件。 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;
}

设计师模板样式的处理方式与designs.scss不同。开发人员的自定义scss进入了apptheme.scss。

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

2 个答案: