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

Question

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

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

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

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链接在一起？如何定义main.css中的@import语句？

我试过@import url(custom.scss);但这不会给我想要的结果.同样,@import url(custom.css);也不会这样做.

Answer 1

我找到了解决方案.关键是要了解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中,在Web浏览器上重新加载后):

body {
    color: #f00;
}

万岁!