Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

using .scss file in AEM 6.1


Level 2

Can you please let me know the how to include the .scss file in AEM 6.1. Also please suggest whether i can put this in a separate folder inside /etc/designs/projectname/scss/sample.scss and use the same without doing any build using maven.




0 Replies


Level 10

Hi Siva,

You add files from here http://localhost:4502/miscadmin#/etc/designs/projectname

All files under etc/designs/projectname/ will be part of your project. You are free to add files and folder inside depend upon your requirement but if you are adding using crxde make sure you sync these changes back to you IDE using vaultclipse. This will make same changes in IDE where your project is present and next time when you take build everything should be fine.



Level 2

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.


Level 4

Hi, Samb

To compile scss files in you aem 6.1 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.



The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now