sassthemesliferayliferay-theme

SASS and Liferay - how to use in custom themes?


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.


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!