Expand my Community achievements bar.

using .scss file in AEM 6.1

Avatar

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.

5 Replies

Avatar

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

Avatar

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

Avatar

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

Avatar

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