Less.js no responde en Chrome

La funcionalidad de Less.js en Firefox aunque no responde en Chrome ha generado preocupaciones. Para determinar la causa, examinemos el código proporcionado:

@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%;
}

El código parece implementar Less.js con una sintaxis de preprocesador CSS válida. Sin embargo, el culpable reside en el entorno y los entornos utilizados. Según la documentación proporcionada:

Limitaciones del script del navegador Less.js en Chrome

"El script del navegador Less.js actualmente no funciona si estás usando Chrome y la ruta a su página comienza con "file:///...". Esto se debe a un problema conocido de Chrome".

Esto implica que Less.js puede no funcionar en Chrome cuando se usan archivos locales en lugar de un archivo. servidor web.

Solución

Para resolver el problema, intente lo siguiente:

• Servir archivos mediante un servidor web: Sube tus archivos a un servidor web y accede a ellos usando una URL (por ejemplo, http://example.com/style.less).
• Utiliza una configuración de host local: Ejecutar un servidor de desarrollo local (por ejemplo, el servidor integrado de PHP, SimpleHTTPServer de Python) y acceda a sus archivos a través de una dirección como http://localhost:8000/style.less.
• Considere alternativas: Utilice una herramienta de procesamiento Less.js como grunt o gulp para compilar archivos Less durante el desarrollo, garantizando su compatibilidad con Chrome.