2

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

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

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

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

4

2 回答 2

2

在 vaadins主题文档中提到

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

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

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

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

于 2019-12-02T15:17:46.733 回答
1

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

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

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

<!-- 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. 在 dir set on 中创建了自定义 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";
  1. 通过使用注释在我的应用程序中包含生成的样式表@StyleSheet("css/webapp-bootstrap.css")。
于 2019-12-03T10:32:50.807 回答