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

Question

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

Takes care of synchronizing java dependencies and imports in package.json and main.js files. It also creates webpack.config.js if not exists yet.

在运行应用程序之后，我在根目录上获得了 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 itself isn’t using Sass, but you can of course use it for your own application theming if you want to. You’ll have to setup the sass-compiler workflow yourself, but there are Maven Plugins available for this.

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

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

我自己还没有使用过这个（一旦我有时间会尝试）所以我不能告诉你如何最好地配置所说的插件。但我敢肯定，一旦配置正确，这就是将 SCSS/SASS 与 Vaadin 14

一起使用的方法

Answer 2

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

通过 npm 包含 Bootstrap 的源 Sass 和 JavaScript 文件，在项目的 CLI 上运行 npm install bootstrap根目录；
在我的项目 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>

创建了自定义 SASS 文件，在此示例中命名为 webapp-bootstrap.scss，位于 inputPath:

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";

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

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

How to include a custom SASS file in a Vaadin 14 application?

sass

vaadin

maven

twitter-bootstrap

vaadin14