Как настроить порядок связывания стиля 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);