asp.net-mvc-4 – 如何配置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。

突然我的命令是

<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文件中。

我在想,如果一个样式表有一个名称,它首先被优先排列某些原因,它的顺序与其他文件一起维护。

如果有人可以解释这个,我会给他们支票。

解决方法

如果您单独包含每个文件,则捆绑包将会尊重您的订单…
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);

本质上,有一个庞大的内置文件列表,在任何不在列表中的任何文件之前,它们将被放入一个特定的顺序 – 但这些选项可以让你控制。

相关文章

### 创建一个gRPC服务项目(grpc服务端)和一个 webapi项目(...
一、SiganlR 使用的协议类型 1.websocket即时通讯协议 2.Ser...
.Net 6 WebApi 项目 在Linux系统上 打包成Docker镜像,发布为...
一、 PD简介PowerDesigner 是一个集所有现代建模技术于一身的...
一、存储过程 存储过程就像数据库中运行的方法(函数) 优点:...
一、Ueditor的下载 1、百度编辑器下载地址:http://ueditor....