如何在 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 关于Including Style Sheets 的文档没有提到任何关于 SCSS 的内容。 如何让 Vaadin 的 Maven 插件编译我的 SCSS 文件，以便将生成的 CSS 文件导入我的应用程序？

Answer 1

在 vaadins theming documentation 中提到

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

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

正如 cmets 中所指出的，还有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>

1. 在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") 在我的应用中包含生成的样式表。