Using Sass in AEM | Community
Skip to main content
theo_nicolaou
theo_nicolaou
January 26, 2017
Solved

Using Sass in AEM

  • January 26, 2017
  • 8 replies
  • 13681 views

Hi,

I am looking for resources/articles/advice on how to use Sass (SCSS) within AEM. Our current setup is a Maven project which we paste the CSS files into (in the /etc/designs or /etc/clientlibs folders), the SCSS files are currently in a separate repository which uses Grunt to generate the CSS. So (when developing locally) there is a bit of copying and pasting between the Sass and AEM codebases and then the project is built using Eclipse.

Ideally I would like a set up within our AEM project whereby the CSS is built (but not versioned), and the SCSS files are just versioned. As a first step I am happy to have SCSS files just versioned and CSS built and also versioned. Could still use Grunt within the Maven project or any other alternatives if easier.

I had found a post on this forum from a few years ago - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__qyym-can_you_pleaseletm.html - but it doesn't really answer the question and the StackOverflow article that is linked refers to the fact that LESS is supported by AEM but Sass isn't.

I am hoping that someone on this forum has since had experience with the above and can advise! Are there any plans to support Sass within AEM?

Thanks

Theo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

Here is some feedback that should help you: 

We use it normally in most projects via this maven plugin https://github.com/eirslett/frontend-maven-plugin

That keeps the whole solution pretty tidy and nice, with the whole frontend running on a separate folder:  integrating node, gulp, grunt or whatever in the normal Maven build. 

You just need to add another task to copy the dist file in your aem clientlibs folder. 

8 replies

smacdonald2008
smacdonald2008
January 26, 2017

I am checking with our Product Management team. 

theo_nicolaou
theo_nicolaouAuthor
February 1, 2017

Hi,

Just wondering if there is any update on this, or if anyone has any other advice they can give regarding my questions?

Thanks

Theo

smacdonald2008
smacdonald2008
February 1, 2017

I did not hear back - I did however send a new email. This does not seem like a common use case. Most ppl build projects via maven and control CSS and JS, etc using tools like Eclipse, Brackets, etc. 

smacdonald2008
smacdonald2008Accepted solution
February 1, 2017

Here is some feedback that should help you: 

We use it normally in most projects via this maven plugin https://github.com/eirslett/frontend-maven-plugin

That keeps the whole solution pretty tidy and nice, with the whole frontend running on a separate folder:  integrating node, gulp, grunt or whatever in the normal Maven build. 

You just need to add another task to copy the dist file in your aem clientlibs folder. 

K
kalyan_venkat
February 2, 2017
        You can use maven front end plugin which actually runs the grunt or gulp tasks based on configuration. For example if you want to use scss in your project, just after compiling scss to css move this files from your repository to ui.app...designs/myapp/clientlibs using grunt task. Its better to create a new folder in your code base where all your scss files reside and with the maven front-end plugin you could run list of grunt/gulp tasks where it compiles and move those files to appropriate designs folder.
theo_nicolaou
theo_nicolaouAuthor
February 6, 2017

Thank you both, that's very helpful - I'll certainly be looking into using the plugin.

M
mickjleroy
April 11, 2017

I realize this thread is quite old but it is ranking well for "AEM sass" so in the interest of people being directed here...

I created a Sass compiler for AEM 6.2. It's still early days but it provides support for ".scss" files to be used in client libraries just like you would use ".less" files.

https://github.com/mickleroy/aem-sass-compiler

vjetty
vjetty
April 11, 2017

Hi Theo

Here you can convert scss into css....

To compile scss files in your aem project use the following plugin in your ui.apps pom file. 

<!-- ====================================================================== --> <!-- SASS Plugin                                                         --> <!-- ====================================================================== --> <plugin> <groupId>nl.geodienstencentrum.maven</groupId> <artifactId>sass-maven-plugin</artifactId> <version>2.17</version> <executions> <execution> <phase>prepare-package</phase> <goals> <goal>update-stylesheets</goal> </goals> </execution> </executions> <configuration> <resources> <resource> <source> <directory>${project.parent.basedir}/ui.apps/src/main/content/jcr_root/etc/clientlibs/YOUR-PROJECT/scss</directory> </source> <destination>${project.parent.basedir}/ui.apps/src/main/content/jcr_root/etc/clientlibs/YOUR-PROJECT/css</destination> </resource> </resources> </configuration> </plugin>

Make sure you change path according to your project.

Thanks,

Vamsi

Terms & ConditionsAccessibility statement

Loading footer...