SASS 和 Liferay - 如何在自定义主题中使用？

Question

我真的没有在 liferay 的博客和谷歌上找到答案 - 所以我希望这里的任何人都可以帮助我。

我正在尝试在 liferay 6.2 中构建的自定义主题中开始使用 sass。

据我了解，方法是这样的:

创建一个空主题，(使用 maven，)基于 _styled

这给了我这样的文件布局:

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

开发 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);也不会做。

Answer 1

我找到了解决方案。关键是要了解 Liferay 不使用文件扩展名 *.scss在主题的样式表上。只需将我的 SASS 代码放入 *.css文件完成了工作!

找到解决方案 here .

我的目录布局:

<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 中，在 Web 浏览器上重新加载后):

body {
    color: #f00;
}

万岁!