Load less.js rules dynamically

Question

I\'m looking at using less.js (looks great), but our site requires that some styles be loaded dynamically after initial page load. It seems, however, that all LESS styleshe

Answer 1

I just pushed 1.0.31 — it has a method: less.refreshStyles() which will re-compile <style> tags with type="text/less" — try it out and let me know if it works.

Answer 2

I found an up-to-date version of the script that works perfect with LESS file:

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>

Instead using

less.refreshStyles()

use

less.refresh()

Answer 3

thanks for asking this question – it helped me a lot. I’m just updating the topic in order to show how I did to dynamically add a CSS file.

I used the last version of LESS (1.3.3).

var stylesheetFile = 'file.css';
var link  = document.createElement('link');
link.rel  = "stylesheet";
link.type = "text/less";
link.href = stylesheetFile;
less.sheets.push(link);

less.refresh();

Answer 4

You can use this lightweight (3k) library to lazy load less / css and js files ( disclaimer: i am the author).

This is as simple as:

lazy.load('/static/less/style.less');

It can also receive a callback, load some more assets with dependencies and takes care about cache.