Migration CQ 5.5 -> AEM 5.6.1: LESS compiler issue | Community
Skip to main content
D
Dmitry_Cherkas
Level 2
October 16, 2015
Solved

Migration CQ 5.5 -> AEM 5.6.1: LESS compiler issue

  • October 16, 2015
  • 2 replies
  • 2363 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ojjis

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 :)

2 replies

Ojjis
OjjisAccepted solution
Level 7
October 16, 2015

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 :)

D
Dmitry_CherkasAuthor
Level 2
October 16, 2015

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.

Terms & ConditionsAccessibility statement

Loading footer...