Использование sass стилей в themes

Вопросы и проблемы
#1

Jmix version: 2.2.1
Jmix Studio plugin version: 2.2.1-233
IntelliJ version: IntelliJ IDEA 2023.3.6 (Ultimate Edition)

Добрый день!
Подскажите могу ли я использовать движок стилизации .sass в /frontend/themes/project/, так чтобы сборщик сам все компилировал?

Пробовал настроить vite, ничего не получилось, он просто игнорирует sass файлы:(

Если это возможно, то подскажите пожалуйста как настроить конфигурацию.

#2

Добрый день!
Ваадин не предполагает использование sass внутри проекта, в документации нету упоминаний sass как стиля. Как и ваадин, я бы не советовал использовать дынный функционал в проде.

Самое быстрое решение:

  1. Создаем style1.sass по пути frontend/themes/$projectName/
    .note1
     background-color: aqua
     color: aliceblue
  2. Импортируем sass файл:
    В коренном файле стилей проекта frontend/themes/$projectName/styles.css прописываем @import url('./style1.sass');
  3. Устанавливаем компилятор SASS:
    npm install -D sass
  4. Отключаем “по-чанковую” загрузку фронтенд файлов:
    # application.properties
vaadin.frontend.hotdeploy=true
  5. Идем в login-view.xml и добавляем строчку для теста:
    <layout justifyContent="CENTER" alignItems="CENTER" classNames="jmix-login-main-layout" >
     <h1 classNames="note1" text="!@#!@#!@#"/>
     .....
</layout>
  6. Результат:
    image
  7. Скомпилированный файл в сборке:
    image

Вывод

Еще раз скажу, что для прода не рекомендую такой способ использования стилей, тк это не канон и ваадин вообще ничего не говорит про sass от слова совсем, а так же потому что мы включили хот деплой фронта, а на проде он не желателен.

С уважением, Дмитрий

1 симпатия