Less.js reagiert nicht in Chrome

Die Funktionalität von Less.js in Firefox, während sie in Chrome nicht reagiert, hat Anlass zur Sorge gegeben. Um die Ursache zu ermitteln, untersuchen wir den bereitgestellten Code:

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

Der Code scheint Less.js mit gültiger CSS-Präprozessorsyntax zu implementieren. Der Übeltäter liegt jedoch in der Umgebung und den verwendeten Einstellungen. Gemäß der bereitgestellten Dokumentation:

Less.js-Browserskripteinschränkungen in Chrome

"Less.js-Browserskript funktioniert derzeit nicht, wenn Sie Chrome verwenden und Der Pfad zu Ihrer Seite beginnt mit „file:///…“. Dies ist auf ein bekanntes Chrome-Problem zurückzuführen.“

Dies bedeutet, dass Less.js bei der Verwendung möglicherweise nicht in Chrome funktioniert lokale Dateien statt eines Webservers.

Lösung

Um das Problem zu beheben, versuchen Sie Folgendes:

• Dateien bereitstellen über einen Webserver: Laden Sie Ihre Dateien auf einen Webserver hoch und greifen Sie über eine URL darauf zu (z. B. http://example.com/style.less).
• Verwenden Sie ein Localhost-Setup: Führen Sie einen lokalen Entwicklungsserver aus (z. B. den integrierten Server von PHP, SimpleHTTPServer von Python) und greifen Sie auf Ihren zu Dateien über eine Adresse wie http://localhost:8000/style.less.
• Erwägen Sie Alternativen: Verwenden Sie a Less.js-Verarbeitungstool wie Grunt oder Gulp zum Kompilieren von Less-Dateien während der Entwicklung, um deren Kompatibilität mit Chrome sicherzustellen.