Question

我的网络应用使用了一个带有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"/>

如何配置我的包以正确的顺序呈现？

更新
好吧，这很愚蠢，但确实有效。

无论我做什么，文件总是会错误地渲染。所以我尝试了一些愚蠢的东西，首先添加了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文件中。

我想如果一个样式表有一个 - 在名称中它首先因某种原因被优先排序，并且它的顺序是用其他文件维护的 - 在其中。

如果有人能解释清楚，我会给他们支票。

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

<强>更新

即使使用明确的顺序，您也会发现有一个相当方便的内置订购系统，它首先对所有其他文件命名特定命名的文件。要彻底解决这个问题，您可以使用：

bundles.FileSetOrderList.Clear();

您可以使用以下方式添加自己的自定义订单：

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

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

基本上，有一个庞大的内置文件列表，它会在任何不在列表中的文件之前按特定顺序放置 - 但这些选项可让您控制。

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

如何配置MVC的样式捆绑顺序？

2 个答案: