web-dev-qa-db-fra.com

less.js ne fonctionne pas en chrome

J'ai remarqué que less.js fonctionne dans Firefox mais pas dans Chrome, ou est-ce parce que j'ai commis 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 en chrome, est-ce que je fais une erreur quelque part?

cssgoogle-chromeless
56
Jiew Meng

À partir du lien que vous avez fourni: Le script de navigateur Less.js ne fonctionnera pas actuellement si vous utilisez Chrome et le chemin de votre page commence par «file: ///» en raison d’un problème connu lié à Chrome.

62
Lithium

Lithium est correct. Il existe un problème connu lié à Chrome avec le chargement de fichiers javascript locaux. Il s'agit d'une "fonctionnalité" de sécurité dans Chrome. Je connais deux solutions de contournement:

  1. Développez vos projets locaux avec un serveur Web. Vous pouvez installer et utiliser Apache très facilement, bien que la configuration prenne un peu de patience. Si vous êtes sous Windows, vous pourrez peut-être installer IIS. Lorsque vous faites cela, au lieu de double-cliquer sur un fichier HTML, vous pourrez y accéder depuis 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 souci.

Je suis tenté de mentionner l’utilisation d’une version différente du convertisseur less, comme la version Ruby lessc, ou l’un des ports vers PHP ou .NET, mais less.js est plus récent, et je pense que vous devriez garder avec ça.

50
Nathan Strutz

Au cas où quelqu'un d'autre aurait besoin d'une solution rapide à cela sous Mac OS X (testé sur Lion)

"Procédure pas à pas pour les nuls"

Spécial thx à Lithium , Nathan Strutz + les gars de ce post sur Superuser

Créer un AppleScript 

Apple Script Editor

avec la commande suivante 

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

AppleScript

Puis sauvegarder en tant qu'application

save as Application

(Je l'ai mis dans mon dock et j'ai ajouté une autre icône Chrome pour un accès rapide) 

add to Dock

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

14
user950658

En réalité, contrairement à la réponse acceptée, cela fonctionne très bien. Je suis sur Chrome 19, Mac OS X, le contexte est une extension de Chrome. J'ai vécu le même problème. J'ai commencé à expérimenter différentes manières de l'inclure, en supprimant du texte dans les types rel, taper, href, etc.

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 bien appliqués et la console JavaScript de Chrome présente les éléments suivants (légèrement effacés pour des raisons de clarté):

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

Je sais que personne n’est censé utiliser le côté client CSS compilé, mais dans le contexte d’une extension Chrome, il n’ya pas d’autre alternative que le CSS classique (eww). Vous ne pouvez pas non plus demander la feuille de style à un serveur, car le client sera hors ligne de temps en temps.

4
Michael Johansen

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

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

Vous devez également exécuter votre exemple sur un serveur Web tel que IIS/Tomcat/Jboss.

J'espère que ça aide

3
Full-Stack Software Engineer

Si vous modifiez la balise link comme ceci, cela fonctionnera avec n’importe quel navigateurONLYsi vous n’utilisez pas la syntaxe Less dans le fichier:

<link rel="stylesheet" type="text/less" href="css/styles.less" />

Alors, pourquoi voudriez-vous utiliser un simple CSS dans un fichier moins? Aucune idée, mais juste pour que vous sachiez.

1
Claudio Oliva

J'ai trouvé cette petite application très utile pour contourner le fichier: // problème: Anvil for Mac. Une minute, c'est fini et autant de sites que vous le souhaitez via des URL telles que http://myapp.dev .

http://anvilformac.com/

0
Joshua Muheim

Si vous ne voulez pas utiliser -allow-file-access-from-files, ni exécuter wamp, lamp, etc. vous pouvez utiliser cette extension, cela m'a beaucoup aidé. le lien

0
Davo Mkrtchyan