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

SOLVED

Migration CQ 5.5 -> AEM 5.6.1: LESS compiler issue

Avatar

Level 2

Hi,

We are moving our project from CQ 5.5 to AEM 5.6.1 and ran into issues with LESS compiler (as far, as I know, in AEM 5.6.1 LESS was updated to 1.3.3).

In 5.5 we had a common clientLib, which contained all the mixins and vars declarations(call it common.less.rules), it was then embedded in other clientLibs as follows:

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" categories="my.custom.library" embed="common.less.rules"/>

And it works perfectly fine in 5.5, but in 5.6.1 we are getting the following errors in compiled css files:

/***************************************************** LESS compilation failed due a JavaScript error! Input: /etc/designs/widget.less Error: @myVar is undefined (uncompiled LESS src is included below) *****************************************************/

This blogpost was very usefull: http://www.citytechinc.com/us/en/blog/2012/08/less_css_in_adobecq.html. While debugging com.day.cq.widget.impl.LessCompiler class I figured out that it compiles all *.less files, specified in css.txt separately, not including any embedded libraries, which leads to JavaScript error, mentioned above.

So my question is: how to tell LessCompiler that it should embed my common.less.rules prior to compilation. The only workaroud, I have found so far is to add @import statement to each *.less, but I hope there is a easier way, since it was working correctly in 5.5 without any import statements.

 

If my question is not clear enough, please ask, I will provide additional details.

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hello, I've experienced the same thing.
One way of solving this is to have the separate less files include the variable file at the top like:
 

----------------- /* in mylessfile.less */ ------------------ @import "/etc/designs/my/site/clientlib/css/muVariables.less"; .myClass { .myVariable(none); }

That will work 🙂

View solution in original post

0 Replies

Avatar

Correct answer by
Level 7

Hello, I've experienced the same thing.
One way of solving this is to have the separate less files include the variable file at the top like:
 

----------------- /* in mylessfile.less */ ------------------ @import "/etc/designs/my/site/clientlib/css/muVariables.less"; .myClass { .myVariable(none); }

That will work 🙂

Avatar

Level 2

Thanks for your reply.

I have looked through the Less compiler implementation(com.day.cq.widget.impl.LessCompiler), used by CQ 5.5 and AEM 5.6.1 As it appears, in 5.5 the compiler was first merging clientLib to a single file and then compiling the result, while the new implementation compiles each *.less file, specified by clientLib separately. So explicitly specifying @import is the only solution.