Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Using Sass in AEM

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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. 

View solution in original post

8 Replies

Avatar

Level 10

I am checking with our Product Management team. 

Avatar

Level 2

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

Avatar

Level 10

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. 

Avatar

Correct answer by
Level 10

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. 

Avatar

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

Avatar

Level 2

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

Avatar

Level 2

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

Avatar

Level 4

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