Dynamisches Laden von LESS-Stylesheets

Sie haben Interesse an der Verwendung von LESS.js bekundet und gleichzeitig das dynamische Laden bestimmter Stile nach der ersten Seite gefordert laden. Das bestehende Verhalten von LESS.js erfordert jedoch, dass alle LESS-Stylesheets vor dem LESS.js-Skript geladen werden, wie das folgende Funktionsbeispiel zeigt:

Fehler tritt auf, wenn diese Reihenfolge umgekehrt wird, da weder Firefox noch Chrome versucht, das Stylesheet zu laden, es sei denn, es steht vor dem Skript. Diese Reihenfolgeanforderung wird aufgrund der Art des Parsing-Prozesses von LESS.js erzwungen.

Wir stellen vor: less.refreshStyles()

Um Ihren Bedarf an dynamischem Styling zu decken, Version 1.0 .31 von LESS.js führt die Methode less.refreshStyles() ein. Diese Methode ermöglicht die Neukompilierung von

Um diese Funktion zu implementieren, fügen Sie nach dem Laden dynamischer LESS-Stylesheets einfach die folgende Zeile ein:

less.refreshStyles();

Beispielcode

Um die Funktionalität zu demonstrieren, können Sie das von Ihnen bereitgestellte Testcode-Snippet so ändern, dass nach dem dynamischen Laden des Stylesheets diese Zeile eingefügt wird:

Diese Änderung weist LESS.js an, das dynamische Stylesheet neu zu kompilieren, sodass es wirksam wird, ohne dass die Seite neu geladen werden muss.