如何在 Vaadin 14 应用程序中包含自定义 SASS 文件?

Question

我正在Maven上开发一个Vaadin 14应用程序，所以我正在使用vaadin-maven-plugin根据Vaadin的v14入门应用程序：

负责同步 java 依赖项并在 package.json 和 main.js 文件中导入。它还会创建 webpack.config.js如果尚不存在的话。

运行应用程序后，我得到了package.json文件和根目录上的node-modules。之后我执行了npm install bootstrap，并在src/main/webapp/frontend/中创建了一个自定义的 SCSS 文件，其中包含一些精心挑选的@import指令来获得我自己的 Bootstrap 构建。

Vaadin 关于包含样式表的文档没有提到任何关于 SCSS 的内容。如何让 Vaadin 的 Maven 插件编译我的 SCSS 文件，以便将生成的 CSS 文件导入我的应用程序中？

Answer 1

在vaadins主题文档中，它提到

Vaadin 14 本身没有使用 Sass，但如果您愿意，您当然可以将其用于您自己的应用程序主题。您必须自己设置 sass-编译器工作流程，但有 Maven 插件可用于此。

经过快速搜索，我找到了这个sass-maven-plugin，它可能会做你需要的;在打包之前将你的sass/scss文件编译为css。

正如评论中指出的那样，还有libsass-maven-plugin。

我自己还没有使用它(一旦我有时间就会尝试(，所以我无法告诉你如何最好地配置所述插件。但我敢肯定，一旦配置正确，这就是将 SCSS/SASS 与 Vaadin 14 一起使用的方法

Answer 2

按照@Kaspar Scherrer的回答，我能够通过执行以下步骤生成Twitter Bootstrap的自定义构建，以作为CSS包含在我的Vaadin 14应用程序中：

1. 通过 npm 包含 Bootstrap 的源 Sass 和 JavaScript 文件，在项目的根目录中的 CLI 上运行npm install bootstrap;

2. 在我的项目pom.xml上设置 libsass-maven-plugin ：

<!-- SASS compiler -->
<plugin>
<groupId>com.gitlab.haynes</groupId>
<artifactId>libsass-maven-plugin</artifactId>
<version>0.2.21</version>
<executions>
<execution>
<phase>generate-resources</phase>
<goals>
<goal>compile</goal>
</goals>
</execution>
</executions>
<configuration>
<inputPath>${basedir}/src/main/webapp/frontend/sass/</inputPath>
<includePath>${basedir}/node_modules/</includePath>
<outputPath>${basedir}/src/main/webapp/frontend/css/</outputPath>
<failOnError>true</failOnError>
</configuration>
</plugin>

3. 在inputPath上的目录内创建了自定义 SASS 文件，在本例中名为webapp-bootstrap.scss：

html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
// Required
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/breakpoints";
@import "bootstrap/scss/mixins/clearfix";
@import "bootstrap/scss/mixins/deprecate";
@import "bootstrap/scss/mixins/grid-framework";
@import "bootstrap/scss/mixins/grid";
@import "bootstrap/scss/mixins/hover";
@import "bootstrap/scss/mixins/screen-reader";
@import "bootstrap/scss/mixins/text-emphasis";
@import "bootstrap/scss/mixins/text-hide";
@import "bootstrap/scss/mixins/text-truncate";

// Optional
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities/align";
@import "bootstrap/scss/utilities/clearfix";
@import "bootstrap/scss/utilities/display";
@import "bootstrap/scss/utilities/flex";
@import "bootstrap/scss/utilities/float";
@import "bootstrap/scss/utilities/position";
@import "bootstrap/scss/utilities/screenreaders";
@import "bootstrap/scss/utilities/sizing";
@import "bootstrap/scss/utilities/spacing";
@import "bootstrap/scss/utilities/text";

4. 使用注释@StyleSheet("css/webapp-bootstrap.css")在我的应用程序上包含生成的样式表。