Expand my Community achievements bar.

SOLVED

AEM with Bootstrap 3 and LESS does not compile. Any fixes?

Avatar

Level 1

I have tried this in both AEM 5.6.1 and AEM 6 (load 18), but it behaves (errors) the same.

I'm trying to use Bootstrap 3 and LESS (the built-in compiler via rhino) and it keeps coming up with compilation errors due to the following 'extend' method, which was introduced in LESS version 1.4:

&:extend(.clearfix all);

When I was using AEM 5.6.1 I tried to update the version of LESS that is being used by going to /system/console, looking for the UI Commons bundle, unpackaging it, editing the "less-1.3.3.js" file, and re-packaging / re-uploading it, but that didn't work either (it behaves the same after a server reboot).
Is there any way to fix this without compiling LESS somewhere else (I'd rather not compile via Maven build). 

Thanks,
Ryan

1 Accepted Solution

Avatar

Correct answer by
Level 10

 Why don't you have own client lib with version you want?

When re-packed make sure the file name for less is less-1.3.3.js  plus You need to uninstall & install the bundle from felix console & Delete everything under /var/clientlibs/* from crxde light & Save the changes. Also restart the bundle. 

Note:-  repacking the factory bundle will impact support & you might not get official assistance. Use with precaution.

View solution in original post

5 Replies

Avatar

Correct answer by
Level 10

 Why don't you have own client lib with version you want?

When re-packed make sure the file name for less is less-1.3.3.js  plus You need to uninstall & install the bundle from felix console & Delete everything under /var/clientlibs/* from crxde light & Save the changes. Also restart the bundle. 

Note:-  repacking the factory bundle will impact support & you might not get official assistance. Use with precaution.

Avatar

Level 2

I've been using a different approach of using a lesscss-maven-plugin as part of my maven build process to compile less since before it was included out of the box with clientlibs. I've found it pretty bullet proof, easily upgraded to the latest version though configuration, and most importantly it finds compilation errors at buld time.

https://github.com/shoebappa/lesscss-maven-plugin-example

Avatar

Level 1

Do you know what bundle LESS lives in in AEM 6? I was able to find it under "Granite UI Commons" in AEM 5.6.1, but since upgrading to AEM 6 I cannot find it anymore.

Avatar

Level 2

Adobe Granite UI Commons (com.day.cq.cq-widgets)

Avatar

Level 1

Haha, right after I posted that question I went and looked there. It isn't searchable in the browser like it was in AEM 5.6.1, but yep, it's still there.

Now my issue is when I update the less javascript to the newest version and try to re-upload the bundle it fails, returning a 500 error. When I try to re-upload the original bundle (with the old LESS), it works fine.

So frustrating.