Less.js ne répond pas dans Chrome

La fonctionnalité Less.js dans Firefox tout en ne répondant pas dans Chrome a soulevé des inquiétudes. Pour déterminer la cause, examinons le code fourni :

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

Le code semble implémenter Less.js avec une syntaxe de préprocesseur CSS valide. Cependant, le coupable réside dans l’environnement et les paramètres utilisés. Selon la documentation fournie :

Limites du script du navigateur Less.js dans Chrome

"Le script du navigateur Less.js ne fonctionnera actuellement pas si vous utilisez Chrome et le chemin d'accès à votre page commence par "file:///…". Cela est dû à un problème connu avec Chrome. "

Cela implique que Less.js peut ne pas fonctionner dans Chrome lors de l'utilisation de fichiers locaux plutôt que d'un la toile serveur.

Solution

Pour résoudre le problème, essayez ce qui suit :

• Servez les fichiers à l'aide d'un serveur Web : Téléchargez vos fichiers sur un serveur Web et accédez-y à l'aide d'une URL (par exemple, http://example.com/style.less).
• Utilisez un hôte local setup : Exécutez un serveur de développement local (par exemple, le serveur intégré de PHP, SimpleHTTPServer de Python) et accédez à vos fichiers via une adresse telle que http://localhost:8000/style.less.
• Envisagez des alternatives : Utilisez un outil de traitement Less.js tel que grunt ou gulp pour compiler les fichiers Less pendant le développement, en garantissant leur compatibilité avec Chrome.