web-dev-qa-db-ja.com

TwitterによるASP.NET MVC4バンドルBootstrap

TwitterでMVC 4の新しいバンドリング機能を使用しようとしていますbootstrapそして、CSSに含まれるグリフィコン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"));

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

asp.nettwitter-bootstrapasp.net-mvc-4bundling-and-minificationasp.net-optimization
37
Pelle

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

TodoリストのcssにリベースURLがありますが、今のところ、バンドルパスをcssディレクトリのようにして、相対URLが機能するようにするのが最も簡単です。

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

pdate： 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()));
38
Hao Kung

「CssRewriteUrlTransform」は、仮想ディレクトリ上で実行されないアプリケーションに対しては正常に機能します。

したがって、アプリが http://your-site.com/ で実行されている場合は問題なく実行されますが、 http://your-site.com/your-appで実行されている場合/ デフォルトの「CssFixRewriteUrlTransform」は「/」で画像を参照しているため、すべての画像に404が使用されます。

この問題を解決するために、次のように自分のバージョンの「CssRewriteUrlTransform」を実装しました。

    public class CssFixRewriteUrlTransform : IItemTransform {
    private static string ConvertUrlsToAbsolute(string baseUrl, string content) {
        if (string.IsNullOrWhiteSpace(content)) {
            return content;
        }
        var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)");
        return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")"));
    }

    public string Process(string includedVirtualPath, string input) {
        if (includedVirtualPath == null) {
            throw new ArgumentNullException("includedVirtualPath");
        }
        var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
        return ConvertUrlsToAbsolute(directory, input);
    }

    private static string RebaseUrlToAbsolute(string baseUrl, string url) {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) {
            return url;
        }
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) {
            baseUrl = string.Concat(baseUrl, "/");
        }
        return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url));
    }
}

更新：それがそこに別の解決策であることを指摘したスーパージョーのおかげで：

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}
25
Luís Deschamps Rudge

あなたができることは、カスタマイズに行くことができます ページ とスプライトの@iconSpritePathと@iconWhiteSpritePathを変更することができますセクション、そしてもちろん、新しいスタイルをダウンロードします。

画像をフォルダーContent/Imagesフォルダーに入れて、パスを変更しました。

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

別の方法として、すべてのLESSファイルを github からダウンロードし、variables.lessファイルで同じ変数を変更して、 bootrap.lessSimpLESS などのツールを使用したファイル。

5
LeftyX

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

ただやる：

  1. Install-Package AspNetBundling
  2. CssRewriteUrlTransformをCssRewriteUrlTransformFixedに置き換えます
1
benmccallum