Question

I’m using the client-side javascript version of LESS to compile out less code, and would like to continue using this even on the final live site (I know… bad form, but it gives me the ability to allow users to customize a few less variables and have that “theme” their whole app on the fly, seeing as it’s a webapp that once loaded never refreshes, I’m thinking the additional second of load time to compile the less is acceptable).

I’m also using requireJS.

The question is:

A) How do I get requireJS to load less code?

B) Does less dispatch any events when compilation is complete? and

C) Is there a way to trigger less to re-compile on command?

Thanks.

Answer 1

I have used the text loader plugin for RequireJS to load the .less file as text, then create a new less.Parser instance to parse the text, then add the style text myself:

(new less.Parser()).parse(lessText, function (err, css) {
  if (err) {
    if (typeof console !== 'undefined' && console.error) {
      console.error(err);
    }
  } else {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = css.toCSS();
  }
});

You could take a similar approach, but give the style node an ID and remove that ID and then add back another reparsed LESS text when you want on demand.

A caveat: the text plugin can only load text files on demand when the text file is on the same domain as the web page. If you use the RequireJS optimizer, you can inline the text into a built, optimized JS file.