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!