Raggruppamento di file less e css insieme

Question

Mi sembra di dover utilizzare il raggruppamento per raggruppare un gruppo di file che vengono utilizzati insieme in un'unica consegna al browser. Ciò significherebbe, ad esempio per il mio stile di root mi piacerebbe fare qualcosa di simile al seguente:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less", 
    "~/Content/bootstrap.css", 
    "~/Content/bootstrap-responsive.css"); 
bundle.Transforms.Add(new LessTransform()); 
bundle.Transforms.Add(new CssMinify()); 
bundles.Add(bundle);  

Ma questo non sembra funzionare molto bene con il custom transform technique for bundling less files come sembra che pre-bundle tutte le file in un singolo file css prima di passarlo a LessTransform. Da quello che posso dire questo metodo funziona solo se si raggruppano tutti i file meno insieme.

C'è un modo per ottenere pacchetti per consentire sia i file less che i file css nello stesso pacchetto?

Answer 1

Ho avuto un po 'più di un'occhiata in questo e ho provato ad usare Bundle invece di StyleBundle ma ho ancora avuto problemi. Penso che il problema riguardi in particolare il file bootstrap.css con una sintassi che meno non piace.

Answer 2

credo che tutti i CSS è valido MENO (ma non tutti meno è validato CSS)

Quindi, avendo la LessTransform applicato al vostro file CSS bootstrap non dovrebbe fare alcuna differenza.

Continuerà a raggruppare tutti i file in un file css da consegnare al browser.

Ci potrebbe essere solo una prestazioni problema durante la fase di progettazione .

L'output corretto verrà comunque prodotto e la memorizzazione nella cache preverrà eventuali problemi di prestazioni di runtime.

Answer 3

Sì, hai ragione, il trasformatore concatena tutti i contenuti CSS/LESS prima di passarlo al convertitore. Detto questo, il convertitore non dovrebbe soffocare la presenza sia di LESS che di CSS, poiché puoi sempre includere CSS standard all'interno di un foglio di stile MENO.

Il problema sembra essere che si sta utilizzando un oggetto StyleBundle a cui è già associato un trasformatore. Provare a usare un generico Bundle come faccio io nel mio config, in questo modo:

var customStyles = new Bundle("~/bundle/style/css") 
         .Include("~/Content/normalize.css","~/Content/*.less"); 
bootstrapStyles.Transforms.Add(new LessTransform()); 
bootstrapStyles.Transforms.Add(new CssMinify()); 
bundles.Add(customStyles); 

Per quanto riguarda la propria risposta qui sotto, il problema con il file bootstrap.css non è che il trasformatore MENO non piace, ma probabilmente un problema di percorso per @imports, assicurati che il tuo trasformatore LESS utilizzi qualcosa per assicurarti che risolva i percorsi corretti per i fogli di stile delle dipendenze.

Answer 4

So che questo è un po 'di un vecchio post, ma ho notato qualcosa di strano che possa essere utile a qualcuno ...

Ho trovato che Bundle oggetto non piace trattini nel nome del file css quando sono inclusi anche meno file. vale a dire:

var frontendStyles = new Bundle("~/bundles/frontend.main.css") 
      .IncludeDirectory("~/Content/less", "*.less") 
      .Include(
       "~/Content/ladda.css", 
       "~/Content/jquery.mobile.custom.structure.min.css", 
       "~/Content/jquery-ui.1.9.2.custom.css" 
      ); 

non funziona per me, ma il seguente fa (modifica al nome del file jQueryUI):

var frontendStyles = new Bundle("~/bundles/frontend.main.css") 
      .IncludeDirectory("~/Content/less", "*.less") 
      .Include(
       "~/Content/ladda.css", 
       "~/Content/jquery.mobile.custom.structure.min.css", 
       "~/Content/jqueryui.1.9.2.custom.css" 
      ); 

Così, cambiando il nome del file da "~/Content/bootstrap-responsive.css" a "~/Content/bootstrapresponsive.css" potrebbe benissimo ordinare il problema per tu.