Twitter Bootstrapがless.jsと連携していません

私はそれを最も単純な形式に分解しましたが、これがなぜ機能していないのかまだ分かりません。すべてのファイルが解決され、ブートストラップのインポートがまだロードされていますが、スタイルはロードされません。Twitter Bootstrapがless.jsと連携していません

ブートストラップ1.4.0 少ない1.1.3

<html> 
    <head> 
     <title>ahhhhhh...</title> 

     <link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less"> 
     <script src="/less/less-1.1.3.min.js"></script> 

    </head> 
    <body> 

     <h1>WTF!!!</h1> 

    </body> 
</html>

私は正常に動作し、簡単なstyle.lessを作りましたよ！私は驚くほど明白な何かを逃していますか？

更新：トッドによって要求された

style.less：あなたがローカルでこれを開発している場合

@primary_color: green; 

h1 { 
    color: @primary_color; 
}

出典

2011-11-11 briangallagher

に

url(../img/glyphicons-halflings.png);

と

url(@iconSpritePath);

を交換するあなたを投稿することができますstyle.less？ – Todd

@Toddがこの投稿を更新しました。 style.lessはうまく動作します。 – briangallagher

コンソール内にロード/レンダリングされたスタイルシートが表示されますか？ –

、ブラウザが正しいプロトコルを使用していることを確認してください。アドレスバーにhttp：と表示され、ファイルではありません。と表示されます。 .htmlファイルにアクセスするとき（XAMPPのセットアップで）Chromeを使用して、私のWindows 7マシンで

は、私はブートストラップとless.jsを使用して、同じCSSの問題を抱えていた。しかし

file:///C:/xampp/htdocs/index.html

、それはやりましたでhttp経由で正しく表示：

http://localhost/index.html

ないのはなぜ特定の、しかし私はless.jsがHTTPヘッダーに依存していることを想像してみてください。

出典

2011-11-15 02:49:39 joelhaus

ファイル構造に問題はありますか？ /less/bootstrap/1.4.0/bootstrap.lessは、あなたのhtmlファイルに関係なく、あなたのドメインのルートを指します。

あなたは、Apacheでホスティングされている、あなたは、次のプロジェクト構造を持っている場合：

www/ 
    your project/ 
     less/ 
     index.html 
    another project/ 
    others/

あなたはhttp://localhostからindex.htmlにアクセスすると、それはwww/あるドメインルートからlessファイルを検索します。したがって、lessフォルダがこのルートディレクトリの下にないので、404（見つからない）として返されます。

解決策は、少ないファイルに対して相対URLを使用することです。上記の構造を持っている場合は、 '/'を削除して代わりにless/bootstrap/1.4.0/bootstrap.lessを使用してください。

出典

2011-11-15 03:44:57 steveyang

残念ながら、これは問題ではありません。アプリは仮想ホスト上にあり、すべてのcss/lessはdomianのルートに依存します。インポートが少ないファイルがロードされている場合でも、すべてのファイルが正しく解決されています。 – briangallagher

アップデート2012年3月5日：ブートストラップの連中はブートストラップのバージョン2.0.2でこの問題を修正しました（まだリリースされていません）。 this commitを参照してください。

less.jsの現在のバージョンでは、url（）値に変数を直接使用することはできません（例：url(@iconWhiteSpritePath)）。代わりに文字列補間を使用する必要があります（例：url("@{iconWhiteSpritePath}")）これは同じことを成し遂げます。ブートストラップの人たちは、このクォークを考慮に入れて構文を更新しました。

オリジナル回答

私は今日、正確な問題に遭遇したと、それの原因を考え出しました。あなたのスタックは私の前にいくつかのバージョンがあるので（私はBootstrap 2.0とless.js 1.2.2を使用しています）、それは同じ問題であるとは確信できませんが、おそらく関連しています。

：sprites.lessで背景画像のURL（）値で直接それらを使用して、その後

@iconSpritePath:   "../img/glyphicons-halflings.png"; 
@iconWhiteSpritePath:  "../img/glyphicons-halflings-white.png";

そして：

とにかく、私にとっての問題は、Twitterのブートストラップは、いくつかの変数を定義しているということでした大きな問題を引き起こしているthis Github issueでの議論パー

[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url(@iconSpritePath); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 

    .ie7-restore-right-whitespace(); 
} 
.icon-white { 
    background-image: url(@iconWhiteSpritePath);

}

。 less.jsがこの値を超過すると、コンパイル全体が失敗します。

良いニュースは、その問題の修正があり、csnoverによって提供されています。

if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

に

if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

、あなたが設定する必要があります。ただ、tree.URLにこの行を変更します。言い換えれば、val.valueが、charAt（）が未定義でチョークしないように設定されていることを確認します。

この修正プログラムはすぐにプロジェクトにコミットされ、ブートストラップはすぐにブラウザ環境のless.jsで動作します。私にとって

出典

2012-02-17 19:38:43 jsdalton

これは私のために働いたが、これはless.jsのフルバージョン（https://github.com/cloudhead/less.jsから入手可能）でのみ動作し、ウェブサイトからダウンロードしたバージョンでは動作しないことに注意してください。 – feldoh

が

[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url(../img/glyphicons-halflings.png); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 

    .ie7-restore-right-whitespace(); 
} 
.icon-white { 
    background-image: url(../img/glyphicons-halflings-white.png); 
}

を働いていたので、less.js v1.2.1デベロッパーとブートストラップv2.0.1の

出典

2012-02-23 00:40:26 maxx

私はまったく同じ問題に遭遇しました。あなたのソリューションは私のために働く。ありがとう！ – Abe

@注意してください、それはそのようには機能しません - 新しいソリューションを使用してください – maxx

Twitter Bootstrapがless.jsと連携していません

答えて

関連する問題