web-dev-qa-db-ja.com

MVCのスタイルバンドル順序を構成するにはどうすればよいですか？

私のウェブアプリは、jquery-uiとjqgridで設定された大きなアイコンを使用しています。
jquery-uiまたはjqgridをアップグレードするときに大きなアイコンに対応するためにCSSへの変更を簡単に維持するために、多数のオーバーライドがある別のCSSファイルがあります。

ご想像のとおり、このオーバーライドファイル[〜＃〜] must [〜＃〜]は、jquery-uiスタイルシートとjqgridスタイルシートの後に含める必要があります。

私はすべてのスタイルシートをそのようにバンドルに入れました

bundles.Add(new StyleBundle("~/Content/dark-Hive/allstyles").Include(
    "~/Content/dark-Hive/jquery-ui-1.8.23.custom.css",
    "~/Content/ui.jqgrid.css",
    "~/Content/jquery-ui-fixes.css",
    "~/Content/icons.css",
    "~/Content/site.css"));

しかし、それはそのようにレンダリングされています！

<link href="/Content/dark-Hive/jquery-ui-1.8.23.custom.css" rel="stylesheet"/>
<link href="/Content/jquery-ui-fixes.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<link href="/Content/icons.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

正しい順序でレンダリングするようにバンドルを構成するにはどうすればよいですか？

更新
わかりました、これはばかげていますが、うまくいきました。

私が何をしたとしても、ファイルは常に正しくレンダリングされませんでした。だから私は愚かなことを試し、最初にjquery-ui-fixes.cssを追加し、最後にjquery-ui-1.8.23.custom.cssを追加しました。

突然私の注文は

<link href="/Content/jquery-ui-fixes.css" rel="stylesheet"/>
<link href="/Content/dark-Hive/jquery-ui-1.8.23.custom.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<link href="/Content/icons.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

Javascriptファイルの名前をjqueryuifixes.cssに変更しましたが、その順序は下位のjsファイルに保持されます。

スタイルシートの名前に-が含まれている場合、何らかの理由で最初に優先され、その順序は-が含まれている他のファイルで維持されると思います。

誰かがこれを説明できるなら、私は彼らにチェックをします。

asp.net-mvc-4bundling-and-minification
23
Biff MaGriff

各ファイルを個別に含めると、バンドルは注文を尊重します...

var bundle = new Bundle("~/Content/dark-Hive/allstyles", new StyleBundle());           
bundle.Include("~/Content/dark-Hive/jquery-ui-1.8.23.custom.css");
bundle.Include("~/Content/ui.jqgrid.css");
bundle.Include("~/Content/jquery-ui-fixes.css");
bundle.Include("~/Content/icons.css");
bundle.Include("~/Content/site.css");
bundles.Add(bundle);

[〜＃〜] update [〜＃〜]

明示的な順序を使用している場合でも、特定の名前のファイルを他のすべてのファイルよりも最初に順序付ける、かなり便利な組み込みの順序付けシステムがあることがわかります。これを完全にクリアするには、次を使用できます。

bundles.FileSetOrderList.Clear();

また、以下を使用して独自のカスタム注文を追加できます。

BundleFileSetOrdering ordering = new BundleFileSetOrdering("My Order");
ordering.Files.Add("jquery.js");

bundles.FileSetOrderList.Clear();
bundles.FileSetOrderList.Add(ordering);

基本的に、リストにないファイルの前に特定の順序で配置されるファイルの大規模な組み込みリストがありますが、これらのオプションを使用すると、制御できます。

42
Fenton

カスタムバンドラーを作成し、OrderFilesメソッドをオーバーライドできます

public class CustomBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

次に、cssファイルをバンドルしたい順序で渡します

var bundle = new StyleBundle("~/Content/dark-Hive/allstyles")
{
    Orderer = new CustomBundleOrderer()
};

bundle.Include(
    "~/Content/dark-Hive/jquery-ui-1.8.23.custom.css",
    "~/Content/ui.jqgrid.css",
    "~/Content/jquery-ui-fixes.css",
    "~/Content/icons.css",
    "~/Content/site.css");

bundles.Add(bundle);
10
Vlad Bezden