Cargar reglas de Less.js dinámicamente

Incorporar Less.js en un sitio web puede mejorar sus capacidades de estilo. Sin embargo, una limitación encontrada es el requisito de cargar todas las hojas de estilo LESS antes del script Less.js. Esto puede representar un desafío cuando ciertos estilos deben cargarse dinámicamente después de la carga inicial de la página.

Limitaciones actuales

Actualmente, Less.js dicta que el orden de carga externo Las hojas de estilo y el guión juegan un papel crucial. Al invertir el orden, como se muestra a continuación, no se puede cargar el archivo style.less tanto en Firefox como en Chrome:

Solución en Less.js v1.0.31

Para abordar esta limitación, la versión 1.0.31 de Less.js introdujo un método llamado less.refreshStyles(). Este método permite la recompilación de etiquetas

Implementación de la carga dinámica

Para implementar la carga dinámica de Less. js, sigue estos pasos:

1. Asegúrate de estar usando la versión 1.0.31 o posterior de Less.js.
2. Incluye la etiqueta
3. Agregue las reglas LESS que desea aplicar dinámicamente dentro de la etiqueta
4. Llame a less.refreshStyles() para volver a compilar y aplicar el nuevas reglas.

Ejemplo:

En JavaScript:

less.refreshStyles();