Bundling Less e CSS Files insieme

Question

Mi sento come un raggruppamento dovrebbe essere usato per raggruppare un gruppo di file che usi insieme in un'unica consegna al browser.Ciò significherebbe per esempio per il mio stile radice che vorrei fare qualcosa come il 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 Tecnica di trasformazione personalizzata per il raggruppamento meno file Come sembra che pre-bundle pre-bundle tutti i file in un singolo file CSS prima di passarlo alla lesstransform.Da ciò che posso dire a questo metodo funziona solo se riempli tutti i tuoi file meno insieme.

C'è un modo per ottenere i bundle per consentire ai file di meno e CSS nello stesso pacchetto?

Answer 1

Ho avuto un po 'più di uno sguardo in questo e ho provato a usare un pacchetto anziché stylebundle, ma ha ancora problemi.Penso che il problema sia specificamente a che fare con il file bootstrap.csss avendo una sintassi che meno non ama.

Answer 2

Sì Hai ragione, il trasformatore concatena tutti i contenuti CSS / meno prima di passare al convertitore.Detto questo, il convertitore non dovrebbe soffocare la presenza sia di meno e dei CSS, come puoi sempre includere il CSS standard all'interno di un foglio di stile meno.

Il problema sembra essere quello che stai utilizzando un oggetto StyleBundle che ha già associato un trasformatore.Prova a utilizzare un Generico Bundle come faccio nella mia configurazione, come questa:

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 tua risposta qui sotto, il problema con il file bootstrap.csss non è che il minore trasformatore non piace, ma probabilmente un problema di percorso per @imports, assicurati che il tuo minore trasformatore utilizzi qualcosa per assicurarti che si risolvai percorsi appropriati per qualsiasi fogli di stili di dipendenza.

Answer 3

Credo che tutto il CSS sia valido meno (ma non tutto meno è valido css)

Quindi avere il LessTransform applicato ai file BOOTSTRAP CSS non dovrebbe fare alcuna differenza.

Bunterrà ancora tutti i file in un file CSS da consegnare al browser.

Potrebbe esserci solo un problema durante Design-Time .

L'uscita corretta sarà comunque prodotta e la cache impedirà a qualsiasi Tempo di runtime .

Answer 4

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

Ho trovato che l'oggetto Bundle non ama i trattini nel nome del file CSS quando sono inclusi anche meno file.I.e.:

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 segue il seguente (cambia a Jqueryui Nome file):

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

.

Quindi, la modifica del nome file da "~/Content/bootstrap-responsive.css" a "~/Content/bootstrapresponsive.css" potrebbe benissimo ordinare il problema per te.