如何配置MVC的样式绑定顺序？
如何配置MVC的样式绑定顺序？
提问于 2012-10-30 06:54:27
我的web应用程序使用了一个带有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文件中。
我在想，如果一个样式表的名称中有一个-，那么由于某种原因，它会被优先排序，并且它的顺序会与其他文件中的-保持一致。
如果有人能解释这一点，我会给他们支票。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-30 07:01:31
如果您单独包含每个文件，则捆绑包将遵循您的顺序...
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);从本质上讲，有一个庞大的内置文件列表，这些文件将按照一定的顺序放在任何不在列表中的文件之前-但这些选项让您可以控制。
Stack Overflow用户
发布于 2013-09-13 08:51:57
您可以创建自定义捆绑程序并覆盖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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13130833
复制相关文章
相似问题