5

My page uses Less files that are compiled on the client side. I want to load some of those files after page finished loading.

I tried the "Less in the browser" way, but it seems to only work for files that were originally declared in the head part of the page. Declarations I add later (from Javascript) are not processed by the Less...

Another way I tried was "Programmatic Usage", but in this case I have to inject the CSS code myself. It means I cannot use less.modifyVars() any more to change styling later (or I have to trigger recompilation myself and then replace the generated CSS, which I want to avoid).

I like the first way more, but I don't know how to load files after page finished initial loading. Maybe there is a function to load Less file?

Thank you!

Andrej
  • 1,679
  • 1
  • 26
  • 40
  • Please can you explain your use case further? Why do you want to load some style rules after the html document has finished loading? – Rounin Jan 26 '16 at 12:22
  • @Rounin, I have a single page application, not a classic web site. Some of its parts are optional and are loaded during its execution. Also the styling should be changeable without restarting the application. – Andrej Jan 26 '16 at 12:30
  • Ah, okay. And it doesn't work to have something like .state1 h2 {color: rgb(255,255,255);} .state2 h2 {color: rgb(255,255,0);} .state3 h2 {color: rgb(255,0,0);} etc.? – Rounin Jan 26 '16 at 12:33
  • @Rounin, it's not flexible enough. Imagine you have a color that is used on multiple places (like text color, border line color, shadow color, gradient background etc.) You will have to write dozens of rules with the same color. And if you have components that are loaded later and you know nothing about then you don't know where they use the color and will not be able to set it. Using Less variables you can define global variables used by every one... – Andrej Jan 26 '16 at 14:31

1 Answers1

2

I think I found solution:

less.registerStylesheets().then(
        function () {
            less.refresh();
        }
);

First function will reread declarations. The second one will recompile all files (actually not very good).

Andrej
  • 1,679
  • 1
  • 26
  • 40
  • 1
    As for "Maybe there is a function to load Less file?". No, Less isn't in fact the library to *manipulate* styles or stylesheets in a browser. But since you're already in a browser scripting realm, it's not a problem to write a script to do everything you need exactly in way you want it to be. See for example http://stackoverflow.com/a/25325750. – seven-phases-max Jan 26 '16 at 18:50