Dynamic Loading of LESS Stylesheets

You've expressed interest in utilizing LESS.js while requiring dynamic loading of certain styles following the initial page load. However, the existing behavior of LESS.js mandates that all LESS stylesheets be loaded before the LESS.js script, as demonstrated by the functional example below:

Failure occurs when this order is inverted, as neither Firefox nor Chrome attempts to load the stylesheet unless it precedes the script. This ordering requirement is enforced due to the nature of LESS.js's parsing process.

Introducing less.refreshStyles()

To address your need for dynamic styling, version 1.0.31 of LESS.js introduces the less.refreshStyles() method. This method enables the recompilation of

To implement this feature, simply incorporate the following line after loading any dynamic LESS stylesheets:

less.refreshStyles();

Example Code

To demonstrate the functionality, you can modify the test code snippet you provided to include this line after the dynamic loading of the stylesheet:

This modification will instruct LESS.js to recompile the dynamic stylesheet, allowing it to take effect without the need to reload the page.