58

less.jsが firefox では機能しているのに 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%;
}

試しhtml { background: red; }てもchromeで動かないのですがどこか間違っているのでしょうか？

4

8 に答える 8

62

あなたが提供したリンクから:既知の Chrome の問題により、Chrome を使用していて、ページへのパスが「file:///」で始まる場合、Less.js ブラウザー スクリプトは現在機能しません。

于 2010-06-21T13:24:56.610 に答える
50

Lithium は正しいです。Chrome には、ローカルの JavaScript ファイルの読み込みに関する既知の問題があります。これは Chrome のセキュリティ「機能」です。私が知っている2つの回避策があります：

  1. Web サーバーを使用してローカル プロジェクトを開発します。Apache は非常に簡単にインストールして使用できますが、構成には多少の忍耐が必要です。Windows を使用している場合は、IIS をインストールできる場合があります。これを行うと、HTML ファイルをダブルクリックする代わりに、http://localhost/から参照します。

  2. コマンドライン スイッチ-allow-file-access-from-filesをショートカットに追加すると、Chrome で手間をかけずに LESS.JS を読み込めるようになります。

rubylesscバージョンや、PHP や .NET へのポートの 1 つなど、less コンバーターの別のバージョンの使用について言及したくなりますが、less.js の方が最新であり、それを維持する必要があると思います。

于 2011-09-08T15:47:01.410 に答える
14

他の誰かが Mac OS X (Lion でテスト済み) でこれに対する迅速な解決策を必要とする場合に備えて

「ダミーのためのウォークスルー」

Lithiumさん、Nathan Strutz さん、およびSuperuserのこの投稿のメンバーに感謝します。

AppleScript を作成する

アップル スクリプト エディタ

次のコマンドで 

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

AppleScript

次に、アプリケーションとして保存します

アプリケーションとして保存

(これをドックに入れて、高速アクセス用の代替 Chrome アイコンを追加しました)

ドックに追加

重要:このスクリプト (アプリ)を機能させるには、Chrome を閉じる必要があります。

于 2012-02-04T11:24:11.747 に答える
4

実際、受け入れられた答えに反して、これはうまくいきます。私は Chrome 19、Mac OS X を使用しています。コンテキストは Chrome 拡張機能です。同じ問題が発生しました。rel、type、href などのテキストを切り替えて、それを含めるさまざまな方法を試し始めました。

これは機能します。キーは href="css/styles.css (.less ではなく .css を使用) です。

<link rel="stylesheet/less" type="text/css" href="css/styles.css" />
<script src="libs/less-1.3.0.min.js" type="text/javascript"></script>

スタイルは適切に適用され、Chrome の JavaScript コンソールには次のように表示されます (わかりやすくするために少し省略しています)。

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

コンパイルされた CSS クライアント側を使用することは想定されていませんが、Chrome 拡張機能のコンテキストでは、通常の CSS (eww) 以外に代替手段はありません。クライアントが時々オフラインになるため、サーバーからスタイルシートを要求することもできません。

于 2012-07-07T21:51:57.323 に答える
3

LESSファイルのコンパイル済みバージョンを使用することをお勧めします。これは、たとえばWinLessまたはSimpLESSを使用するWindowsで実行できます。

私はwinlessを使用しています。コードを保存すると、.cssファイルが自動的にコンパイルされます。

また、IIS / tomcat/JbossなどのWebサーバーでサンプルを実行する必要があります

お役に立てば幸いです

于 2012-08-28T22:43:49.263 に答える
1

リンク タグを次のように編集すると、ファイル内で Less 構文を使用していない場合にのみ、任意のブラウザーで機能します。

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

では、なぜ少ないファイルでプレーンな css を使用するのでしょうか? わかりませんが、ご存知のとおりです。

于 2014-01-29T19:19:27.777 に答える
0

この小さなアプリは、file:// の問題を回避するのに非常に便利であることがわかりました: Anvil for Mac. 1 分で起動し、 http://myapp.devのような URL を介して好きなだけサイトを実行します。

http://anvilformac.com/

于 2012-10-13T08:44:11.367 に答える