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

using .scss file in AEM 6.1

Samb
Level 2
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.

 

Thanks

Siva.

0 Replies
edubey
Level 10
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.

Thanks

Samb
Level 2
Level 2

Thanks,But still want to check whether i can use the .scss  (http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html)

file in the same manner. 

Thanks

Siva

mickjleroy
Level 2
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.

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

vjetty
Level 4
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.

Thanks,

Vamsi