23

我的网络应用程序使用带有 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 文件中。

我在想，如果样式表的名称中有 - ，由于某种原因它首先被优先考虑，并且它的顺序与其他带有 - 的文件一起维护。

如果有人能解释这一点，我会给他们支票。

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 回答