37

私はTwitterブートストラップでMVC4の新しいバンドル機能を使用しようとしていますが、cssgetのグリフィコンpngファイルへのパスが何らかの形で台無しになっているように見えます。これが私のコードです：

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

ボタンなどにアイコンが表示されません。私はここで何か間違ったことをしていますか？助言がありますか？

4

4 に答える 4

38

この問題は、css ファイル内のアイコン/画像が相対パスを使用している可能性が最も高いため、バンドルがバンドルされていない css ファイルと同じアプリの相対パスにない場合、リンクが壊れます。

todo リストの css で URL をリベースしていますが、現時点では、バンドル パスを css ディレクトリのように見えるようにして、相対 URL が機能するようにするのが最も簡単です。つまり、次のようになります。

new StyleBundle("~/Static/Css/bootstrap/bundle")

更新: 1.1beta1 リリースでこのサポートを追加したため、画像の URL を自動的に書き換えるために、このリベースを自動的に行う新しい ItemTransform を追加できます。

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
于 2012-09-25T16:31:17.210 に答える
5

できることは、カスタマイズページに移動して変更@iconSpritePathし@iconWhiteSpritePath、[スプライト]セクションで、もちろん、新しいスタイルをダウンロードすることです。

画像をフォルダフォルダに入れ、Content/Imagesパスを次のように変更しました。

  • /Content/Images/glyphicons-halflings.png
  • /Content/Images/glyphicons-halflings-white.png

もう1つの方法は、githubからすべてのLESSファイルをダウンロードし、 variables.lessファイルの同じ変数を変更し、 SimpLESSなどのツールを使用してbootrap.lessファイルを再コンパイルすることです。

于 2012-09-25T15:34:31.987 に答える
1

これに対する修正がAspNetBundling NuGet パッケージに追加され、標準トランスフォーマーの他の多くの問題、特に data-uris の使用に関する問題が解決されました。GitHubでもオープンソース化されています。

ただ行う：

  1. Install-Package AspNetBundling
  2. CssRewriteUrlTransformと置き換えますCssRewriteUrlTransformFixed
于 2015-12-15T11:14:05.540 に答える