我的网络应用程序使用带有 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 文件中。
我认为,如果样式表的名称中包含 - ,由于某种原因,它会首先被优先考虑,并且它的顺序与其他包含 - 的文件一起维护。
如果有人能解释这一点,我会给他们支票。
最佳答案
如果您单独包含每个文件, bundle 将尊重您的订单...
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);
本质上,有一个巨大的内置文件列表,这些文件将按一定顺序放置在不在列表中的任何文件之前 - 但这些选项可让您进行控制。
关于asp.net-mvc-4 - 如何配置 MVC 的样式捆绑顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13130833/