SASS and Liferay - how to use in custom themes?

liferay, liferay-theme, sass, themes

Solution

I found the solution. Key is to understand that Liferay does not use the file extension `*.scss` on a theme's stylesheets. Just dropping my SASS code into a `*.css` file did the job!

Found the solution here.

My directory layout:

<theme>
  +-src
     +-main
        +-webapp
           +-css
              +-main.css
              +-custom.css

main.css looks like:

@import url(custom.css);

/* other css import here */

and custom.css like this:

$color: #f00;
body {
    color: $color;
}

And the result is (in custom.css, after reloading on the web browser):

body {
    color: #f00;
}

Hooray!

Problem

I don't really find an answer on liferay's blogs and google - so i hope anyone here can help me. I'm trying to get started with sass in a custom theme i am building in liferay 6.2. As i understand it, the approach would be this: - create an empty theme, (using maven,) based off _styled this gives me a file layout like this: ``` <theme> +-src +-main +-webapp +-css +- ... here i'll put any css overwrites ``` develop sass stylesheets, link to `main.css` ``` <theme> +-src +-main +-webapp +-css +-main.css +-custom.scss ``` main.css initially looks like this: ``` @import url(custom.css); /* other css import here */ ``` custom.scss would contain some SASS content: ``` $color: #f00; body { color: $color; } ``` Now my question: How do I link both CSS and SASS together correctly? How does the `@import` statement in main.css have to be defined? I tried `@import url(custom.scss);` but this won't give me the desired results. Likewise, `@import url(custom.css);` won't do it either.

Original source