Chargement dynamique des règles Less.js

L'intégration de Less.js dans un site Web peut améliorer ses capacités de style. Cependant, une limitation rencontrée est la nécessité de charger toutes les feuilles de style LESS avant le script Less.js. Cela peut poser un défi lorsque certains styles doivent être chargés dynamiquement après le chargement initial de la page.

Limites actuelles

Actuellement, Less.js dicte que l'ordre de chargement des fichiers externes les feuilles de style et le script jouent un rôle crucial. L'inversion de l'ordre, comme indiqué ci-dessous, ne parvient pas à charger le fichier style.less dans Firefox et Chrome :

Solution dans Less.js v1.0.31

Pour résoudre cette limitation, la version 1.0.31 de Less.js a introduit une méthode appelée less.refreshStyles(). Cette méthode permet de recompiler les balises

Implémentation du chargement dynamique

Pour implémenter le chargement dynamique de Less. js, suivez ces étapes :

1. Assurez-vous d'utiliser Less.js version 1.0.31 ou plus tard.
2. Incluez la balise
3. Ajoutez les règles LESS que vous souhaitez appliquer dynamiquement dans le Balise
4. Appelez less.refreshStyles() pour recompiler et appliquer le nouveau règles.

Exemple :

En JavaScript :

less.refreshStyles();