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

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

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!

Answer 2

是的，如果您在Liferay 6.2中工作，文件扩展名应为.css，但如果您在Liferay 7 / DXP中工作则应该是.scss。