Как настроить порядок связывания стиля MVC?

В моем веб-приложении используется большой набор значков с jquery-ui и jqgrid.
Чтобы легко поддерживать изменения в CSS для размещения более крупных значков при обновлении jquery-ui или jqgrid, у меня есть отдельный файл 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"/>

Как настроить мой пакет для рендеринга в правильном порядке?

Обновление
Хорошо, это глупо, но это сработало.

Независимо от того, что я сделал, файлы всегда отображались некорректно. Поэтому я пробовал что-то глупое и добавил сначала jquery-ui-fixes.css и jquery-ui-1.8.23.custom.css last.

Вдруг мой заказ

<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 файлах.

Я думаю, что если в таблице стилей есть имя - по имени, то по какой-то причине оно становится приоритетным, и порядок поддерживается с другими файлами с a-in.

Если кто-нибудь сможет это объяснить, я дам им чек.

Ответ 1

Если вы включаете каждый файл отдельно, пакет будет уважать ваш заказ...

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

По существу, имеется массивный встроенный список файлов, который будет помещен в определенном порядке перед любым файлом, которого нет в списке, но эти параметры позволяют вам контролировать.

Ответ 2

Вы можете создать свой настраиваемый набортор и переопределить метод 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);