Pourquoi mon Less.js ne fonctionne-t-il pas dans Chrome ?

Less.js ne répond pas dans Chrome

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

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@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 serveur Web.

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 une configuration d'hôte local : 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, garantissant ainsi leur compatibilité avec Chrome.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!