SASS и Liferay — как использовать в пользовательских темах?

Я действительно не нахожу ответа в блогах Liferay и Google, поэтому я надеюсь, что кто-нибудь здесь может мне помочь.

Я пытаюсь начать работу с sass в пользовательской теме, которую я создаю в liferay 6.2.

Насколько я понимаю, подход будет таким:

  1. создать пустую тему (используя maven) на основе _styled

  2. это дает мне такой макет файла:

    <theme>
  +-src
     +-main
        +-webapp
           +-css
              +- ... here i'll put any css overwrites

  3. разработать таблицы стилей sass, ссылка на main.css

    <theme>
  +-src
     +-main
        +-webapp
           +-css
              +-main.css
              +-custom.scss

main.css изначально выглядит так:

@import url(custom.css);

/* other css import here */

custom.scss будет содержать некоторый контент SASS:

$color: #f00;
body {
    color: $color;
}

Теперь мой вопрос: как мне правильно связать CSS и SASS вместе? Как должен быть определен оператор @import в main.css?

Я попробовал @import url(custom.scss);, но это не дало мне желаемых результатов. Точно так же и @import url(custom.css); этого делать не будет.


themes sass liferay liferay-theme
person jhohlfeld    schedule 17.02.2014    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Я нашел решение. Важно понимать, что Liferay не использует расширение файла *.scss в таблицах стилей темы. Просто поместив мой код SASS в файл *.css, я сделал свое дело!

Решение найдено здесь.

Мой макет каталога:

<theme>
  +-src
     +-main
        +-webapp
           +-css
              +-main.css
              +-custom.css

main.css выглядит так:

@import url(custom.css);

/* other css import here */

и custom.css примерно так:

$color: #f00;
body {
    color: $color;
}

И результат (в custom.css после перезагрузки в веб-браузере):

body {
    color: #f00;
}

Ура!

person jhohlfeld    schedule 17.02.2014
comment
так что просто для ясности, я могу написать sass прямо в custom.css и liferay преобразует это в css при сборке (я использую maven)? - person br3w5; 08.04.2015

arrow_upward
2
arrow_downward

Да, если вы работаете в Liferay 6.2, расширение файла должно быть .css, но если вы работаете в Liferay 7/DXP, оно должно быть .scss.

person designershyam    schedule 29.01.2018