less.js ne fonctionne pas dans chrome

Question

J'ai remarqué que less.js fonctionne dans firefox mais pas dans Chrome, ou est-ce parce que j'ai fait une erreur ?

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

même si j'essaie html { background: red; } cela ne fonctionne toujours pas dans chrome, ai-je fait une erreur quelque part ?

Answer 1

D'après le lien que vous avez fourni : Le navigateur Less.js script ne fonctionne pas actuellement si vous utilisez Chrome et que le chemin d'accès à votre page commence par "file:///" en raison d'un problème connu de Chrome.

Answer 2

Lithium a raison, il y a un problème connu de Chrome avec le chargement des fichiers javascript locaux. Il s'agit d'une "fonctionnalité" de sécurité dans Chrome. À ma connaissance, il existe deux solutions de contournement :

1. Développez vos projets locaux avec un serveur web. Vous pouvez installer et utiliser Apache très facilement, même si la configuration demande un peu de patience. Si vous êtes sous Windows, vous pourrez peut-être installer IIS. Dans ce cas, au lieu de double-cliquer sur un fichier HTML, vous le parcourrez à partir de http://localhost/

2. Ajoutez le commutateur de ligne de commande -allow-file-access-from-files à votre raccourci et Chrome vous permettra de charger LESS.JS sans problème.

Je suis tenté de mentionner l'utilisation d'une version différente du convertisseur less, comme le ruby lessc ou l'un des portages vers PHP ou .NET, mais less.js est plus actuel, et je pense que vous devriez le conserver.

Answer 3

Dans le cas où quelqu'un d'autre aurait besoin d'une solution rapide pour Mac OS X (testé sur Lion)

"Procédure pas à pas pour les nuls"

---

---

Spécial thx pour le Lithium, Nathan Strutz + les gars de ce post sur les super-Utilisateur

---

---

Créer un script AppleScript

avec la commande suivante

---

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome-allow-file-access-from-files"

---

Puis les enregistrer en tant que Demande

(J'ai mis ceci dans mon dock et a ajouté une alternative icône de google Chrome pour un accès rapide)

IMPORTANT: Chrome doit être fermé pour que ce script(App) au travail.

Answer 4

En fait, contrairement à la réponse acceptée, cela fonctionne bien. Je suis sur Chrome 19, Mac OS X, le contexte est une extension Chrome. J'ai rencontré le même problème. J'ai commencé à expérimenter différentes façons de l'inclure, en changeant le texte dans le rel, le type, le href et ainsi de suite.

Cela fonctionne, la clé est href="css/styles.css (utilisez .css, pas .less) :

<link rel="stylesheet/less" type="text/css" href="css/styles.css" />
<script src="libs/less-1.3.0.min.js" type="text/javascript"></script>

Les styles sont joliment appliqués et la console JavaScript de Chrome affiche ce qui suit (légèrement dépouillé pour plus de clarté) :

less: parsed /css/styles.css successfully. less-1.3.0.min.js:8
less: css generated in 33ms

Je sais que l'on n'est pas censé utiliser des feuilles de style CSS compilées côté client, mais dans le contexte d'une extension Chrome, il n'y a pas d'autre alternative que les feuilles de style CSS ordinaires (beurk). Vous ne pouvez pas non plus demander la feuille de style à un serveur car le client sera hors ligne de temps en temps.

Answer 5

Je vous recommande d'utiliser une version compilée. du fichier LESS. Vous pouvez le faire par exemple sous Windows avec WinLess ou SimpLESS.

J'utilise Winless. Il compile automatiquement mes fichiers .css lorsque je sauvegarde mon code.

Vous devez également exécuter votre exemple sur un serveur web comme IIS / tomcat / Jboss.

J'espère que cela aidera