using .scss file in AEM 6.1

[Samb]

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.

[edubey]

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]

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

[edubey]

Take a look @ http://stackoverflow.com/questions/16458062/adobe-cq-and-sass-scss

They have shown SASS usage with AEM

I hope it help you

[mickjleroy]

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]

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