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

Я разрабатываю приложение 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.

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


maven twitter-bootstrap sass vaadin vaadin14
person Rolando Isidoro    schedule 02.12.2019    source источник
comment
Я не знаю о плагине vaadin maven. Но вы можете использовать следующий плагин и автоматизировать почти что угодно с правильными настройками цели и фазы. github.com/eirslett/frontend-maven-plugin   -  person pmverma    schedule 02.12.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

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

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

person kscherrer    schedule 02.12.2019
comment
@Kasper Scherrer, спасибо, что указали мне правильное направление. Репозиторий github плагина Maven, который вы упомянули, был заархивирован: версия 3.7.2, вероятно, является последней и последней версией этого плагина, поскольку (Ruby) Sass достиг конца жизни. Я поискал еще и выбрал плагин LibSass Maven, указанный в sass-lang.com/libsass#java. Пожалуйста, обновите свой ответ ссылкой на этот плагин, чтобы я мог его принять. - person Rolando Isidoro; 02.12.2019
comment
Отредактировал его. Но я заметил, что последняя версия libsass-maven-plugin на год старше последней версии sass-maven-plugin. Я еще не пробовал ни того, ни другого, поэтому не могу сказать, что лучше. Как только я попробую их сам, я обновлю этот ответ. - person kscherrer; 03.12.2019
comment
У вас не тот libsass-maven-plugin, это mvnrepository.com/artifact /com.gitlab.haynes/, который был разветвлен от добавленного вами и имеет более новые версии. - person Rolando Isidoro; 03.12.2019

arrow_upward
1
arrow_downward

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

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

  2. Настройте libsass-maven-plugin в моем проекте 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>
  1. Создал пользовательский файл 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").
person Rolando Isidoro    schedule 03.12.2019
comment
Спасибо за публикацию подтверждения того, что он работает, и за настройку плагина. Я бы сказал, что вы заслужили принять свой собственный ответ, я не против;) Ура - person kscherrer; 03.12.2019
comment
Сделанный. Спасибо за вдохновение :) - person Rolando Isidoro; 04.12.2019