Comment inclure le CSS requis pour utiliser la feuille de calcul Vaadin dans mon thème?

Question

J'ai du mal à faire en sorte que le CSS (scss soit plus précis) pour que le tableur Vaadin soit inclus dans le thème de mon projet.

Est-ce que je l'ajoute comme ça à styles.scss?

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

.wastecentertheme { 
    @include valo; 
} 

@mixin addons { 
    @include spreadsheet; 
} 

Ou est-ce comme ça?

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

.wastecentertheme { 
    @include valo; 

    @mixin addons { 
    @include spreadsheet; 
    } 

} 

Les anciens compiles mais la Css de sortie ne semble pas avoir l'une des règles requises. La deuxième casse avec ce message ...

[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 

Des idées? Peut-être que j'ai besoin de récupérer le .scss à partir des importations de .jar maven pour Vaadin-Spreadsheet et de déposer une copie de celui-ci dans mon répertoire et faire un @ import aussi bien?

Answer 1

addons.scss est un fichier géré par Vaadin via des cibles Maven. Si un add-on a un css qui doit être inclus dans le thème, alors la cible maven l'inclura automatiquement dans addons.scss lors de la compilation du thème. Il est divisé en un fichier propre afin qu'il puisse être écrasé à tout moment et ne devrait pas être modifié manuellement. Après avoir ajouté la dépendance de feuille de calcul à votre pom.xml et en cours d'exécution par exemple mvn install, addons.scss devrait ressembler à ceci:

/* 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; 
} 

alors la configuration par défaut de styles.scss comprend les addons au thème en les mélangeant principal. 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; 
} 

Non que le style de modèle Designer est géré de la même manière avec designs.scss. Le scss personnalisé du développeur va dans l'apptheme.scss.

Answer 2

La réponse semble être que Vaadin générait en quelque sorte automatiquement un fichier addons que vous devriez inclure en tant que directive importante et include dans le fichier .scss. Cela devrait vraiment être documenté plus clairement.

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

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