Less.js-Regeln dynamisch laden

Die Integration von Less.js in eine Website kann deren Gestaltungsmöglichkeiten verbessern. Eine Einschränkung besteht jedoch darin, dass alle LESS-Stylesheets vor dem Less.js-Skript geladen werden müssen. Dies kann eine Herausforderung darstellen, wenn bestimmte Stile nach dem ersten Laden der Seite dynamisch geladen werden müssen.

Aktuelle Einschränkungen

Derzeit schreibt Less.js die Reihenfolge des externen Ladens vor Dabei spielen Stylesheets und das Skript eine entscheidende Rolle. Wenn Sie die Reihenfolge umkehren, wie unten gezeigt, kann die Datei style.less sowohl in Firefox als auch in Chrome nicht geladen werden:

Lösung in Less.js v1.0.31

Um diese Einschränkung zu beheben, wurde in Version 1.0.31 von Less.js eine Methode namens less.refreshStyles() eingeführt. Diese Methode ermöglicht die Neukompilierung von

Dynamisches Laden implementieren

Um das dynamische Laden von Less zu implementieren. js-Regeln befolgen Sie diese Schritte:

1. Stellen Sie sicher, dass Sie Less.js Version 1.0.31 oder verwenden später.
2. Fügen Sie das
3. Fügen Sie die LESS-Regeln hinzu, die Sie dynamisch innerhalb des anwenden möchten
4. Rufen Sie less.refreshStyles() auf, um das neue neu zu kompilieren und anzuwenden Regeln.

Beispiel:

In JavaScript:

less.refreshStyles();