Less.js が Chrome で応答しない

Less.js 機能が Firefox で動作する一方で、Chrome では応答しないままであることが懸念されています。原因を特定するには、提供されたコードを調べてみましょう:

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

このコードは、有効な CSS プリプロセッサ構文を使用して Less.js を実装しているようです。ただし、原因は使用する環境と設定にあります。提供されたドキュメントによると:

Chrome での Less.js ブラウザ スクリプトの制限

「Chrome を使用している場合、Less.js ブラウザ スクリプトは現在機能しません。ページへのパスは「file:///…」で始まります。これは Chrome の既知の問題が原因です。

これは、ローカル ファイルではなく Chrome で Less.js が機能しない可能性があることを意味します。 Web サーバー。

解決策

この問題を解決するには、次の手順を試してください:

• Web サーバーを使用してファイルを提供します。 ファイルを Web サーバーにアップロードし、URL (例: http://example.com/style.less) を使用してアクセスします。
• ローカルホスト設定を使用します: 実行します。ローカル開発サーバー (PHP の組み込みサーバー、Python の SimpleHTTPServer など) を使用し、http://localhost:8000/style.less.
• のようなアドレスを介してファイルにアクセスします。代替案を検討してください: grunt や gulp などの Less.js 処理ツールを使用して開発中に Less ファイルをコンパイルし、Chrome との互換性を確保します。