Carregando regras de Less.js dinamicamente

A incorporação de Less.js em um site pode aprimorar seus recursos de estilo. No entanto, uma limitação encontrada é o requisito de carregar todas as folhas de estilo LESS antes do script Less.js. Isso pode representar um desafio quando certos estilos precisam ser carregados dinamicamente após o carregamento inicial da página.

Limitações atuais

Atualmente, Less.js determina que a ordem de carregamento externo as folhas de estilo e o script desempenham um papel crucial. Reverter a ordem, conforme mostrado abaixo, falha ao carregar o arquivo style.less no Firefox e no Chrome:

Solução em Less.js v1.0.31

Para resolver essa limitação, a versão 1.0.31 do Less.js introduziu um método chamado less.refreshStyles(). Este método permite a recompilação de tags

Implementando o carregamento dinâmico

Para implementar o carregamento dinâmico de Less. js, siga estas etapas:

1. Certifique-se de estar usando Less.js versão 1.0.31 ou posterior.
2. Inclua a tag
3. Adicione as regras LESS que deseja aplicar dinamicamente na tag
4. Chame less.refreshStyles() para recompilar e aplicar o novas regras.

Exemplo:

Em JavaScript:

less.refreshStyles();