16

最も単純な形式に分解しましたが、これが機能しない理由をまだ見つけることができません。すべてのファイルが解決され、Bootstrap のインポートはまだ読み込まれていますが、スタイルは読み込まれていません。

ブートストラップ 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 を作ってみました。明らかに明らかな何かが欠けていますか？

アップデート：

Todd のリクエストによる style.less :

@primary_color: green;

h1 {
    color: @primary_color;
}
4

4 に答える 4

6

2012 年 3 月 5 日更新: Bootstrap 担当者は、この問題を Bootstrap のバージョン 2.0.2 (まだリリースされていません) で修正しました。このコミットを参照してください。

根本的なバグは、less.js の現在のバージョンでは、変数を url() 値に直接使用できないことです (例: url(@iconWhiteSpritePath))。代わりに、文字列補間 (例: url("@{iconWhiteSpritePath}")) を使用する必要があります。これにより、同じことが実現します。 . ブートストラップ担当者は、この癖を考慮して構文を更新しました。

元の回答

今日、正確な問題に遭遇し、その原因を突き止めました。あなたのスタックは私のものよりもいくつか前のバージョンなので (私は Bootstrap 2.0 と less.js 1.2.2 を使用しています)、同じ問題であるかどうかはわかりませんが、関連している可能性があります。

とにかく、私にとっての問題は、Twitter Bootstrap がいくつかの変数を定義していることでした。

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

そして、それらを sprites.less の background-image の url() 値で直接使用します。

[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);

}

大きな問題を引き起こしているこの Github issueの議論に従って。less.js がこの値でチョークすると、コンパイル全体が失敗します。

良いニュースは、csnover によって提供された、その問題の修正があることです。tree.URL の次の行を変更するだけです。

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

に

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

設定する必要があります。言い換えれば、未定義で charAt() が詰まらないように val.value が設定されていることを確認するだけです。

この修正がすぐにプロジェクトに反映され、Bootstrap がブラウザ環境で less.js と連携して動作するようになることを願っています。

于 2012-02-17T19:38:43.663 に答える
2

これをローカルで開発している場合は、ブラウザーが正しいプロトコルを使用していることを確認してください。file:ではなく、 http:をアドレスバーに表示する必要があります。

Chrome (XAMPP セットアップ) を使用している Windows 7 マシンで、次の .html ファイルにアクセスするときに Bootstrap で less.js を使用すると、同じ CSS の問題が発生しました。

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

ただし、次の http 経由で適切にレンダリングされました。

http://localhost/index.html

理由は定かではありませんが、less.js は HTTP ヘッダーに依存していると思います。

于 2011-11-15T02:49:39.597 に答える
1

私のために働いた

[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);
}

だから交換する

url(@iconSpritePath);

と

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

less.js v1.2.1 および Bootstrap v2.0.1 で

于 2012-02-23T00:40:26.133 に答える