How do I configure MVC's style bundling order?

Question

My web app is using a large icon set with jquery-ui and jqgrid.
In order to easily maintain the changes to the CSS to accommodate the larger icons when upgrading jquery-

Answer 1

If you include each file individually, the bundle will respect your order...

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

Even using explicit order, you'll find that there is a rather handy built-in ordering system that orders specifically named files first over all others. To completely clear this out, you can use:

bundles.FileSetOrderList.Clear();

And you can add your own custom ordering using:

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

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

Essentially, there is a massive built-in list of files that will get put in a certain order before any file that isn't in the list - but these options let you take control.

Answer 2

You can create your custom bundler and override OrderFiles method

public class CustomBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

then pass your css files in the order you would like them to be bundled

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