2

プロジェクトに twitter-bootstrap を含めようとしていますが、glyphicons-halflings画像は同じディレクトリ ( assets/css/) でのみ動作し、Chrome でのみ動作します (Firefox と Opera では動作しません)。一部を含む (ファイル 'app.less'):

@import 'twitter-bootstrap/bootstrap';
@iconSpritePath: "/img/glyphicons-halflings.png";
@iconWhiteSpritePath: "/img/glyphicons-halflings-white.png";

さまざまなオプションを使用しようとしました: /img.. 、 img/.. 、 /../img 、 /gly...、 public dir に配置します (ちなみに images フォルダーから使用したい)、しかし、それは機能していません。おそらく、connect-assets でこのオプションを設定できます。このフォルダの写真。

app.less ファイルのみをプロジェクトに含める!= css('app')

この場合、Chrome で動作します。

アップデート：

http://localhost:3000/css/../img/glyphicons-halflings.pngChrome では URL が常にに変換されhttp://localhost:3000/img/glyphicons-halflings.png、Firefox では常に../img/glyphicons-halflings.png( background-image: url("../img/glyphicons-halflings.png");) がロードできないことがわかります。@iconSpritePath の私の定義はまったく機能しません。

4

3 に答える 3

1

Expressでブートストラップ（LESSファイルを使用）を使用しています。すべてのブラウザで動作します。ミドルウェアとモジュールを少なくインストールする必要があります。ここに私のコードがあります:

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, '/public' )));

そして私のフォルダ構造：

/public/img <-- the bootstrap img and the rest
/public/javascripts
/public/stylesheets

私が変更しなければならなかった唯一のことは、ブートストラップレスファイルのインクルードでした。例:

// CSS Reset
@import "reset.less";

に

// CSS Reset
@import "/public/stylesheets/reset.less";
于 2012-08-26T17:41:30.397 に答える
1

私はあなたのコードを見て、glyphicon ファイルを public/img フォルダー ツリーにコピーしただけでうまくいきました。

https://github.com/TrevorBurnham/connect-assetsで画像をサポートできることについて言及されていないので、これが問題だったと思います。

于 2012-08-26T16:29:55.417 に答える
0

同様の問題がありましたが、css ファイルのパスとは無関係でした。「assets/images」で画像を参照しようとしていましたが、使用assetPath('images/logo.png')すると、見つからないと言われました。connect-assets (またはおそらく mincer) が行うように見えるのは、アセットから最初のディレクトリを削除することです。画像を参照するには、パスなしで指定する必要がありますassetPath('logo.png')。

于 2014-12-21T00:10:27.610 に答える