How can I dynamically load Less.js rules after the initial page load?

Loading Less.js Rules Dynamically

Incorporating Less.js into a website can enhance its styling capabilities. However, one limitation encountered is the requirement to load all LESS stylesheets before the Less.js script. This can pose a challenge when certain styles need to be loaded dynamically post initial page load.

Current Limitations

Presently, Less.js dictates that the order of loading external stylesheets and the script play a crucial role. Reversing the order, as shown below, fails to load the style.less file in both Firefox and Chrome:

<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

Solution in Less.js v1.0.31

To address this limitation, version 1.0.31 of Less.js introduced a method called less.refreshStyles(). This method enables the recompilation of