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

Question

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

我正在努力开始使用我在Liferay 6.2中构建的自定义主题中的sass。

据我所知，方法是：

1. 创建一个基于_styled
的空主题（使用maven）

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文件即可完成工作！

找到解决方案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 中，在网络浏览器上重新加载后）：

body {
    color: #f00;
}

万岁！

Answer 2

是的，如果您在Liferay 6.2中工作，文件扩展名应为.css，但如果您在Liferay 7 / DXP中工作则应该是.scss。