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
BedrockMission!

Learn More

View all

Sign in to view all badges

SASS, Ecmascript6 and Typescript in Adobe AEM projects

Avatar

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile
fernandou237618
Level 2

11-10-2019

What are the options that I have if I want to use SASS (SCSS) and Ecmascript 6 (or even Typescript) in my projects? Is there a tool to transpile SASS, Ecmascript6 or Typescript that I can use with Adobe AEM?

Thanks,

Fernando

Replies

Avatar

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

151 likes

Total Posts

363 posts

Correct Reply

56 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

151 likes

Total Posts

363 posts

Correct Reply

56 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ankur_Khare
MVP

11-10-2019

Hi,

You could use maven plugin to transpile sass files and then build the code and deploy to aem.

https://www.geodienstencentrum.nl/sass-maven-plugin/plugin-info.html

Hope this helps.

Avatar

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

135 likes

Total Posts

185 posts

Correct Reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Validate 1
MVP
ArpitVarshney
MVP

Likes

135 likes

Total Posts

185 posts

Correct Reply

36 solutions
Top badges earned
Validate 1
Establish
Give Back 5
Give Back 3
Give Back 25
View profile
ArpitVarshney
MVP

11-10-2019

Hi fernandou23761826

You can choose to configure the preprocessors configuration per client library or system-wide.

  • Add the multivalue properties CSS processor and jsProcessor on the client library node
  • Or define the system default configuration via the HTML Library Manager OSGi configuration

Reference: Using Client-Side Libraries

For LESS, AEM gives oob support but for sass, you need to make changes in AEM codebase so that sass written file can be converted to CSS file client library during code compilation.

Reference:

Using Sass in AEM

GitHub - mickleroy/aem-sass-compiler: Enable Sass support for AEM

Regards,

Arpit Varshney

Avatar

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 2
fernandou237618
Level 2

Likes

7 likes

Total Posts

19 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 1
Give Back
Boost 5
Boost 3
View profile
fernandou237618
Level 2

30-10-2019

Hi Guys,

I think the jsProcessor attribute is not working on AEM 6.4.

I've tried lots of things and was not able to make it work.

Also, in this thread there is a conclusion it is not working on 6.4: https://forums.adobe.com/thread/2569095

I want a processor that transforms Typescript or ECMA6 into ECMA5.

https://forums.adobe.com/thread/2569095