Как включить собственный файл SASS в приложение Vaadin 14?

Question

Я разрабатываю приложение Vaadin 14 на Maven, поэтому использую 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.

В документации Ваадина о включении таблиц стилей ничего не упоминается о SCSS. Как я могу заставить плагин Maven Vaadin скомпилировать мой файл SCSS, чтобы я мог импортировать полученный файл CSS в свое приложение?

Answer 1

После ответа @Kaspar Scherrer я смог сгенерировать пользовательскую сборку Twitter Bootstrap для включения в качестве CSS в мое приложение Vaadin 14, выполнив следующие шаги:

1. Включите исходные файлы Sass и JavaScript Bootstrap через npm, запустив npm install bootstrap в интерфейсе командной строки в корневом каталоге проекта;

2. Настройка libsass-Maven-плагин на моем проектаpom.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>

3. Создан пользовательский файл 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";

4. Включил сгенерированные таблицы стилей в мое приложение с помощью аннотации @StyleSheet("css/webapp-bootstrap.css").

Answer 2

В тематической документации vaadins упоминается, что

Сам Vaadin 14 не использует Sass, но вы, конечно, можете использовать его для тематики своего собственного приложения, если хотите. Вам придется самостоятельно настроить рабочий процесс sass-compiler, но для этого доступны плагины Maven.

После быстрого поиска я нашел этот плагин sass-maven, который, вероятно, сделает то, что вам нужно; перед упаковкой скомпилируйте ваши файлы sass / scss в css.

Как указано в комментариях, существует также плагин libsass-maven-plugin.

Я сам еще не использовал это (попробую, когда у меня будет время), поэтому я не могу сказать вам, как лучше всего настроить этот плагин. Но я уверен, что после правильной настройки это способ использовать SCSS / SASS с Vaadin 14.