Less.js が Chrome で動作しないのはなぜですか?

Less.js が Chrome で応答しない

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

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

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

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

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

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

解決策

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

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

以上がLess.js が Chrome で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。