How to add less file to already loaded page?

Question

As I understand it, the js less module compiles all loaded style sheets during initialization.

<link type="text/css" rel="stylesheet/less" href="main.less"> <script src="less/dist/less.min.js" type="text/javascript"></script>

But how to make the less file loaded after the module initialization work?

 $('head').prepend('<link type="text/css" rel="stylesheet/less" href="another.less">');

Compile less in advance when building a project for example.
I agree with @Darth, according to the logic of your connection, you need to recompile everything less at all.
@Darth for example, the user clicked on the active element of the site and need to download new styles.
@Artem Gorlachev I was hoping that the less module has a function for compiling .less files that I can use in the code.
@Diskyp ok, let's say, but what prevents to have these styles already compiled in advance?

Accepted Answer · 2017-06-12T23:19:47

Revised the code https://github.com/less/less.js/blob/3.x/dist/less.js#L750

Try:

 // Я подгружал по клику. //document.getElementById("clicker").addEventListener("click", function() { var link = document.createElement("link"); link.setAttribute("rel", "stylesheet/less"); link.setAttribute("href", "/2.less"); document.getElementsByTagName("head")[0].appendChild(link); // Сверху эквивалент //$('head').prepend('<link type="text/css" rel="stylesheet/less" href="another.less">'); less.registerStylesheetsImmediately(); less.refresh(true, undefined ,true); //});

Possible without adding an element to the head . But not the fact that when updating the library it will not stop working.

 var link = document.createElement("link"); link.setAttribute("href", "/2.less"); less.sheets.push(link); less.refresh(true, undefined ,true);

How to add less file to already loaded page?

1 answer 1

More articles: