webentwicklung-frage-antwort-db.com.de

less.js funktioniert nicht in chrom

Ich habe bemerkt, dass less.js in Firefox funktioniert, aber nicht in Chrome, oder liegt es daran, dass ich einen Fehler gemacht habe? 

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

selbst wenn ich html { background: red; } versuche, funktioniert es immer noch nicht in chrom. mache ich irgendwo einen fehler?

56
Jiew Meng

Über den von Ihnen bereitgestellten Link: Less.js Browserskript funktioniert derzeit nicht, wenn Sie Chrome verwenden und der Pfad zu Ihrer Seite aufgrund eines bekannten Chrome-Problems mit "file: ///" beginnt.

62
Lithium

Lithium ist korrekt, es gibt ein bekanntes Chrome-Problem beim Laden lokaler Javascript-Dateien. Dies ist eine Sicherheitsfunktion in Chrome. Ich kenne zwei Problemumgehungen:

  1. Entwickeln Sie Ihre lokalen Projekte mit einem Webserver. Sie können Apache sehr einfach installieren und verwenden, die Konfiguration erfordert jedoch etwas Geduld. Wenn Sie Windows verwenden, können Sie möglicherweise IIS installieren. Wenn Sie dies tun, können Sie, anstatt auf eine HTML-Datei zu doppelklicken, von http: // localhost/ zu dieser navigieren

  2. Fügen Sie der Verknüpfung den Befehlszeilenschalter -allow-file-access-from-files hinzu. In Chrome können Sie LESS.JS problemlos laden.

Ich bin versucht zu erwähnen, dass ich eine andere Version des less-Konverters benutze, wie die Version von Ruby lessc oder einen der Ports für PHP oder .NET, aber less.js ist aktueller und ich denke, Sie sollten es behalten damit.

50
Nathan Strutz

Falls jemand anderes eine schnelle Lösung dafür unter Mac OS X (getestet mit Lion) benötigt

"Komplettlösung für Dummies"



Special thx an Lithium , Nathan Strutz + die Jungs von dieser Post auf Superuser



AppleScript erstellen 

Apple Script Editor

mit folgendem Befehl 


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

AppleScript

Dann als Anwendung speichern

save as Application

(Ich habe dies in mein Dock gelegt und ein alternatives Chrome-Symbol für den schnellen Zugriff hinzugefügt.

add to Dock

WICHTIG: Chrome muss geschlossen sein, damit script (App) funktioniert. 

14
user950658

Im Gegensatz zu der akzeptierten Antwort funktioniert das gut. Ich bin auf Chrome 19, Mac OS X, Kontext ist eine Chrome-Erweiterung. Ich habe das gleiche Problem erlebt. Ich fing an, mit verschiedenen Möglichkeiten zu experimentieren, um es einzubinden, Text in rel, type, href usw. auszutauschen.

Das funktioniert, der Schlüssel ist href = "css/styles.css (verwende .css, nicht .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>

Die Stile werden gut angewendet, und die JavaScript-Konsole in Chrome hat Folgendes zu sagen (aus Gründen der Klarheit leicht entfernt):

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

Ich weiß, man sollte keine kompilierte CSS-Clientseite verwenden, aber im Zusammenhang mit einer Chrome-Erweiterung gibt es keine andere Alternative als reguläres CSS (eww). Sie können das Stylesheet auch nicht von einem Server anfordern, da der Client hin und wieder offline ist.

4

Ich empfehle Ihnen, eine kompilierte Version der LESS-Datei zu verwenden. Dies ist beispielsweise in Fenstern mit WinLess oder SimpLESS möglich.

Ich verwende Winless. Es kompiliert automatisch meine .css-Dateien, wenn ich meinen Code speichere.

Sie müssen Ihr Beispiel auch auf einem Webserver wie IIS/Tomcat/Jboss ausführen

Ich hoffe, es hilft

Wenn Sie das Link-Tag in etwas wie dieses ändern, funktioniert es mit jedem BrowserONLY, wenn Sie nicht die Less-Syntax in der Datei verwenden:

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

Warum sollten Sie also eine einfache CSS-Datei in einer weniger Datei verwenden? Keine Ahnung, aber du weißt es einfach.

1
Claudio Oliva

Ich fand diese kleine App sehr nützlich, um das file: // Problem: Anvil for Mac zu umgehen. Eine Minute und es läuft upp so viele Seiten wie Sie möchten, und zwar über URLs wie http://myapp.dev .

http://anvilformac.com/

0
Joshua Muheim

Wenn Sie nicht -allow-file-access-from-files verwenden oder wamp, lamp oder ähnliches ausführen möchten, können Sie diese Erweiterung verwenden, die mir sehr geholfen hat. der Link

0
Davo Mkrtchyan