Less.js não responde no Chrome

A funcionalidade Less.js no Firefox enquanto permanece sem resposta no Chrome levantou preocupações. Para determinar a causa, vamos examinar o código fornecido:

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

O código parece implementar Less.js com sintaxe de pré-processador CSS válida. No entanto, o culpado está no ambiente e nas configurações utilizadas. De acordo com a documentação fornecida:

Limitações do script do navegador Less.js no Chrome

"O script do navegador Less.js atualmente não funcionará se você estiver usando o Chrome e o caminho para sua página começa com “file:///…”. Isso se deve a um problema conhecido do Chrome."

Isso implica que Less.js pode não funcionar no Chrome ao usar arquivos locais em vez de arquivos locais. um servidor web.

Solução

Para resolver o problema, tente o seguinte:

• Servir arquivos usando um servidor web : Faça upload de seus arquivos para um servidor web e acesse-os usando uma URL (por exemplo, http://example.com/style.less).
• Use uma configuração de localhost: Execute um servidor de desenvolvimento local (por exemplo, o servidor integrado do PHP, SimpleHTTPServer do Python) e acesse seus arquivos através de um endereço como http://localhost:8000/style.less.
• Considere alternativas: Use uma ferramenta de processamento Less.js, como grunt ou gulp, para compilar Less arquivos durante o desenvolvimento, garantindo sua compatibilidade com Cromo.