less.js lazy sheet load

Question

I\'m wondering if there is a way to load a single less sheet sometime after a page load. This question has an answer that explains how to reload all the sheets, but for my use-

Answer 1

You can use this lightweight 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.

Answer 2

Just adopted MatthewForr answer for my own needs:

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) {
    var $sheet = $('<link />', {
        href: fileName,
        rel: 'stylesheet/less',
        type: 'text/css'
    }).appendTo('head');
    less.sheets.push($sheet[0]);
});
less.refresh();

Answer 3

I wasn't able to figure this out with the explanations above so I'll provide my own.

So first. Load in your Less stylesheet after the page loads. Something like this:

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

Great. Now select your stylesheet and push it into the collection of sheets that Less.js already has. It is expecting a DOM object so I used a jQuery selector.

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

If someone knows a better way to do that please educate me. (I had to add the [0] in order to get it to the right one.) If you do this in the console it will return a number. That number is how many sheets less knows about so hopefully it returned a number one higher then what you already had on page load.

Next part is easy. You tell Less.js to reload all of it's lessy goodness sheets, this includes the sheet you just added to its stack.

less.refresh();

And there you go. That should have just dynamically loaded a stylesheet and told Less to compile it. Hope this helps.

Answer 4

All you have to do is add a new script tag to the DOM. It will then be downloaded and executed.

function addScript (id, url)    //  Adds scripts to the DOM
{
    var s = document.createElement('script');
    s.id = id;
    if (url)    s.src=url;
    s.type='text/javascript';

    document.getElementsByTagName('head')[0].appendChild(s)
    return s;
}

This what I use on my site but I call it on parse. For you to use it as a lazy loader it should work fine for you to call it onload or a similar way.

Answer 5

Alternatively you could write some server-side code which would convert your .less stylesheet into .css on the fly. From the client you would load it lazily as if it were any other .css stylesheet. This is the approach used by http://www.dotlesscss.org/ although it could be used by any flavor of .less.

Maybe not what you're looking for, but it's an option for some I think.

Answer 6

less.js has a function loadStyleSheet in it's local scope which can be used to dynamically load and parse the less styles (lazy load).

The only problem is the function is in the closure created for defining less.js so you cannot access the function from your code.

Maybe it can exposed by extending the api.

---

Update:

I've created a forked version of less.js @ https://github.com/livingston/less.js

Using this version you can load any stylesheet using the method less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

I've also made a pull request to the actual library, hopefully they accept my changes.