web-dev-qa-db-ja.com

less.jsがchromeで動作しない

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で動作しません。どこかで間違いを犯していますか？

cssgoogle-chromeless
56
Jiew Meng

指定したリンクから：Less.jsブラウザースクリプトは、Chromeを使用し、ページへのパスが「file：///」で始まる場合、現在機能しません既知のChrome issue。

62
Lithium

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

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

  2. コマンドラインスイッチを追加します-allow-file-access-from-filesショートカットにChromeを使用すると、大騒ぎせずにLESS.JSをロードできます。

Ruby lesscバージョン、またはPHPへのポートの1つ）のように、lessコンバーターの異なるバージョンを使用することに言及したくなります。 =または.NETですが、less.jsの方が最新であり、引き続き使用する必要があると思います。

50
Nathan Strutz

Mac OS X（Lionでテスト済み）で他の誰かがこのための迅速なソリューションを必要とする場合

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

特別なthxから リチウム 、 ネイサンストラット + この投稿についてスーパーユーザー

AppleScriptを作成します

Apple Script Editor

次のコマンドで

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

AppleScript

その後、アプリケーションとして保存

save as Application

（これをドックに入れて、別のChrome高速アクセス用のアイコンを追加しました）

add to Dock

重要：Chromeは、このscript（App）動作します。

14
user950658

実際、受け入れられた答えに反して、これはうまく機能します。私は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）以外の代替手段はありません。スタイルシートを要求することはできません。クライアントが時々オフラインになるためです。

4
Michael Johansen

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

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

IIS/Tomcat/JbossのようなWebサーバーでサンプルを実行する必要もあります。

私はそれが役立つことを願っています

3
Full-Stack Software Engineer

リンクタグを次のように編集すると、どのブラウザーでも動作します[〜＃〜] only [〜＃〜]ファイル内でLess構文を使用していない場合：

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

それでは、なぜあなたはより少ないファイルでプレーンなCSSを使用するのでしょうか？わかりませんが、知っているだけです。

1
Claudio Oliva

この小さなアプリは、file：//の問題を回避するのに非常に役立つことがわかりました：Anvil for Mac。 1分後、 http://myapp.dev などのURLを使用して、好きなだけ多くのサイトを起動して実行します。

http://anvilformac.com/

0
Joshua Muheim

-allow-file-access-from-filesを使用したくない場合、またはwamp、lampなどを実行したくない場合は、この拡張機能を使用できます。 リンク

0
Davo Mkrtchyan