Maison >interface Web >tutoriel CSS >Pourquoi mon Less.js ne fonctionne-t-il pas dans Chrome ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-02 10:11:30504parcourir

Why Is My Less.js Not Working in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn