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

Question

我在liferay的博客和Google上都没有找到答案，所以我希望这里有人能帮助我。

我正在尝试在Liferay 6.2中构建一个自定义主题，并使用Sass开始工作。

据我理解，方法如下：

1. create an empty theme, (using maven,) based off _styled

2. this gives me a file layout like this:

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

3. develop sass stylesheets, link to 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);也不行。

- jhohlfeld

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;
}

万岁！

- jhohlfeld

---

只是为了明确，我可以直接在 custom.css 中编写 Sass，当 Liferay 构建时它会将其转换为 CSS（我正在使用 Maven）？ - br3w5

Answer 2

如果您正在使用 Liferay 6.2，则文件扩展名应为 .css，但如果您正在使用 Liferay 7/DXP，则应该为 .scss。

- designershyam