sass - 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文件中就可以了！

在这里找到了解决方案。

我的目录布局：

<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。