web-dev-qa-db-ja.com

MVC4バンドル-TwitterなしBootstrapアイコン

MVC4アプリをデバッグモードで実行すると（CSS /スクリプトの縮小は不要）、正常に機能します。デバッグなしで実行すると（css/scriptsが縮小されます）、Twitter Bootstrapアイコンが表示されません。bundles.IgnoreListを使用することをお勧めします。 .Clear（）。しかし、それは私にはうまくいかないようです。私のBundleConfig.RegisterBundles（...）は次のようになります。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.IgnoreList.Clear();

    // Some JavaScript bundles only
    // ...

    bundles.Add(new StyleBundle("~/bundles/maincss").Include(
        "~/Content/bootstrap.css",
        "~/Content/bootstrap-responsive.css",
       "~/Content/my.css"));
    }
}

すべてのパッケージはNugetを使用してインストールされました（私が言うように、デバッグモードでは正常に動作します）。 My Contentフォルダーには、両方のbootstrap ... cssファイルの縮小バージョンも含まれていますが、my.cssの縮小バージョンは含まれていません。グリフアイコンは画像サブフォルダにあります。

私の_Layout.cshtmlは次のようになります。

<head>
    ...
    @Styles.Render("~/bundles/maincss")
</head>

追加する必要があります。「非デバッグ」モードとは、Web.configファイルでdebug = "false"オプションを設定することを意味します。

<compilation debug="false" targetFramework="4.5" />

Twitter bootstrapアイコンが "非デバッグ"モードで表示されない理由を誰かが知っていますか？

ありがとうロブ

cssasp.net-mvc-4twitter-bootstrapbundling-and-minification
21
Rob L

私はモバイルを使用しているので、簡単な回答をお詫びしますが、後で更新します。

これを読んでください

簡単に言えば、バンドル後に相対パスがファウルされたことと関係がありました。しかし、良いニュースは、最新のバンドルライブラリがそれを解決することです。

更新

空白を埋めるために、本質的に起こっていることは、CSSファイルがリソース（この場合はアイコンスプライト）への相対パスを持っているということです。デバッグモードの場合、ファイルはページに個別に出力されるため、参照は保持されます（/Content/bootstrap.cssとimages/glyphicons-halflings.pngの参照（フルパスを/Content/images/glyphicons-halflings.pngにします）。削除されたファイルはバンドルされ、パスはバンドルに指定した仮想パスを基準にしています。上記の場合、/bundles/maincssから発信されているため、誤った/bundles/maincss/images/glyphicons-halflings.pngパスが発生します。

幸いなことに、これは 解決されたバグ であり、Microsoft.AspNet.Web.Optimization v1.1.0の時点で、（CSSファイル内の）すべての相対パスを次のように置き換えるCssRewriteUrlTransformがあります。それらの絶対パスの対応物。これは、バンドルと呼んでも、リソースが解決されることを意味します。

したがって、問題を修正するには、次のようにするだけです。

IItemTransform cssFixer = new CssRewriteUrlTransform();

bundles.Add(
    new StyleBundle("~/bundles/maincss")
        .Include("~/Content/bootstrap.css", cssFixer)
        .Include("~/Content/bootstrap-responsive.css", cssFixer)
        .Include("~/Content/my.css", cssFixer)
);

私の唯一の欠点は、複数のファイルが必要なときにこれがいかに醜いように見えるかということです。したがって、これを解決するには、拡張メソッドを使用して単純化できます。

/// <summary>
/// Includes the specified <paramref name="virtualPaths"/> within the bundle and attached the
/// <see cref="System.Web.Optimization.CssRewriteUrlTransform"/> item transformer to each item
/// automatically.
/// </summary>
/// <param name="bundle">The bundle.</param>
/// <param name="virtualPaths">The virtual paths.</param>
/// <returns>Bundle.</returns>
/// <exception cref="System.ArgumentException">Only available to StyleBundle;bundle</exception>
/// <exception cref="System.ArgumentNullException">virtualPaths;Cannot be null or empty</exception>
public static Bundle IncludeWithCssRewriteTransform(this Bundle bundle, params String[] virtualPaths)
{
    if (!(bundle is StyleBundle))
    {
        throw new ArgumentException("Only available to StyleBundle", "bundle");
    }
    if (virtualPaths == null || virtualPaths.Length == 0)
    {
        throw new ArgumentNullException("virtualPaths", "Cannot be null or empty");
    }
    IItemTransform itemTransform = new CssRewriteUrlTransform();
    foreach (String virtualPath in virtualPaths)
    {
        if (!String.IsNullOrWhiteSpace(virtualPath))
        {
            bundle.Include(virtualPath, itemTransform);
        }
    }
    return bundle;
}

これにより、上記のコードが少しすっきりします。 （おそらく私は長いメソッド名を選びましたが、目的に関してメソッド名を明確にしておきたいです）

bundles.Add(
    new StyleBundle("~/bundles/maincss").IncludeWithCssRewriteTransform(
        "~/Content/bootstrap.css",
        "~/Content/bootstrap-responsive.css",
        "~/Content/my.css"
    )
);
39
Brad Christie

Bootstrap 3.0。 @ brad-christieの回答 ）を使用して同じ問題に遭遇しました。NuGetを使用してMicrosoft ASP.NetWeb最適化フレームワーク1.1にアップグレードするまで問題は解決しました。 1.これにより、CssRewriteUrlTransform修正が機能しなくなったようです。CssRewriteUrlTransformへの参照を削除し、スタイルシートbootstrap-を作成することで、問題を解決しました。 bundle-font-fix.css、以下のみが含まれます：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../../Content/fonts/glyphicons-halflings-regular.eot');
  src: url('../../Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../../Content/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../../Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../../Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

そしてそれを私のbootstrap css bundle：

bundles.Add(new StyleBundle("~/bundles/Content/bootstrap")
    .Include("~/Content/bootstrap/bootstrap.css")
    .Include("~/Content/bootstrap/bootstrap-theme.css")
    .Include("~/Content/bootstrap-bundle-font-fix.css")
    .Include("~/Content/sticky-footer-navbar.css"));
10
daveb