Less files not working with AEM

Question

I am upgrading my website from CQ 5.5.1 to AEM 5.6 and the less parser is failing and it does not compile less files to CSS. Any suggestions of a possible fix to solve the issue.

Answer 1

this link can be usefull: http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__ibm7-hi_we_are_moving.html

The thing is, in AEM 5.6.1 LESS compiler was updated to 1.3.3 and also the approach to server-side compilation was changed: prior to 5.6.1, your clientlib (including all embeds) was passed to LESS compiler as a single concatenated file.

Starting with 5.6.1, each LESS file in your clientlib is compiled separately, that is why the compilation will fail, in case you had your variable declarations in a separate file which was then embedded into numerous clientlibs. This leads to the following error (can be found in produced css):

/*****************************************************
LESS compilation failed due a JavaScript error!

Input: /etc/designs/widget.less
Error: @myVar is undefined

(uncompiled LESS src is included below)
*****************************************************/

To solve this issue, use @Import statement, which is now supported.

Answer 2

I came across this scenario recently where there was issue with less files not getting compiling adn was getting (uncompiled LESS src is included below) Rebuilding the clientlibs solved this issue and the error was gone and the styles where loading correctly.

Steps

Go to /libs/granite/ui/content/dumplibs.rebuild.html and invalidate the cache and rebuild the libs

Hope this will help