SASS and Liferay - how to use in custom themes?

Question

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:

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

Answer 1

Yes, if you are working in Liferay 6.2 file extension should be .css, but if you are working in Liferay 7/DXP it should be .scss.

Answer 2

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!