Come si configura l'ordine di raggruppamento degli stili di MVC?

Question

La mia app Web utilizza una grande icona impostata con jquery-ui e jqgrid.
Per mantenere facilmente le modifiche al CSS in modo da adattarsi alle icone più grandi durante l'aggiornamento di jquery-ui o jqgrid, ho un file CSS separato in cui ho una serie di sovrascritture.

Come si può immaginare questo file di sostituzione DEVE essere incluso dopo il foglio di stile jquery-ui e il foglio di stile jqgrid.

ho messo tutti i miei fogli di stile in un fascio in questo modo

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

ma è in fase di rendering in questo modo!

<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"/> 

Come è possibile configurare il pacchetto per eseguire il rendering nell'ordine corretto?

Aggiornamento
Ok, questo è stupido ma ha funzionato.

Indipendentemente da ciò che facevo, i file venivano sempre visualizzati in modo errato. Così ho provato qualcosa di stupido e ho aggiunto jquery-ui-fixes.css prima e jquery-ui-1.8.23.custom.css l'ultima volta.

Improvvisamente il mio ordine è

<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"/> 

ho rinominato il mio file javascript per jqueryuifixes.css e ora è ordine è conservato nei file js inferiori.

Sto pensando che se un foglio di stile ha un - nel nome viene prima assegnato la priorità per qualche motivo e il suo ordine viene mantenuto con altri file con a - in esso.

Se qualcuno può spiegare questo, darò loro il controllo.

Answer 1

Se si include ogni singolo file, il bundle rispetterà l'ordine ...

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

Anche usando ordine esplicito, troverete che v'è un built piuttosto a portata di mano -in sistema di ordinazione che ordina in modo specifico i file con nome prima su tutti gli altri. Per tutto chiaro questo fuori, è possibile utilizzare:

bundles.FileSetOrderList.Clear(); 

E si può aggiungere la tua ordinazione personalizzato utilizzando:

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

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

In sostanza, v'è una massiccia lista built-in di file che andranno messe in un certo ordine prima di qualsiasi file che non è nella lista - ma queste opzioni ti permettono di prendere il controllo.

Answer 2

è possibile creare il bundler personalizzato e sovrascrivere il metodo OrderFiles

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

quindi far passare i file CSS nell'ordine in cui si desidera che vengano impacchettati

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