Question

I am using YepNope as a resource loader, but I am now having to support Less files, but I cannot seem to get it to load these files, I did read:

https://github.com/SlexAxton/yepnope.js/pull/64

But it doesn’t really say how it should be done… do I have to add a custom filter or prefix with !less and then manually write it out to the DOM?

I would basically be doing something like:

yepnope("path/to/file.less")

Answer 1

Here’s what I do:

yepnope.addPrefix('less', function(resourceObj) {
    resourceObj.forceCSS = true;
    resourceObj.attrs = {
        'rel' : "stylesheet/less",
        'type': "text/css"
    };

    return resourceObj;
}

This will create a yepnope prefix function for any URL that starts with less!. The function will force it to be loaded as CSS and also place the rel and type attributes in the <link> element, which are required for LESS to parse the files. Make sure you’re using yepnope 1.5+, or Modernizr.

Then, in your load statements:

yepnope({
    load: [
        'less!path/to/file.less',
        'less!path/to/file2.less',
        ...
        'path/to/less.js'
    ]
});

Which will first load your *.less files, and then process them with the LESS JavaScript.