23

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

ご想像のとおり、このオーバーライド ファイルは、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"/>

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

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

何をしても、ファイルは常に正しくレンダリングされませんでした。だから私は愚かなことを試して、最初に 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 ファイルで順序が保持されるようになりました。

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

誰かがこれを説明できるなら、私は彼らに小切手をあげます。

4

2 に答える 2

42

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

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);

アップデート

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

bundles.FileSetOrderList.Clear();

また、次を使用して独自のカスタム順序を追加できます。

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

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

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

于 2012-10-29T23:01:31.010 に答える
10

カスタムバンドラーを作成して 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);
于 2013-09-13T00:51:57.283 に答える