Bündeln von Less- und CSS-Dateien

Question

Meiner Meinung nach sollte die Bündelung verwendet werden, um eine Reihe von Dateien, die Sie gemeinsam verwenden, in einer einzigen Übermittlung an den Browser zu gruppieren.Das würde zum Beispiel bedeuten, dass ich für meinen Root-Stil etwa Folgendes tun möchte:

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

Aber das scheint mit dem nicht sehr gut zu funktionieren Benutzerdefinierte Transformationstechnik zum Bündeln weniger Dateien Es sieht so aus, als ob alle Dateien vorab in einer einzigen CSS-Datei gebündelt werden, bevor sie an LessTransform übergeben werden.Soweit ich weiß, funktioniert diese Methode nur, wenn Sie alle Ihre weniger Dateien bündeln.

Gibt es eine Möglichkeit, Bundles zu erhalten, um sowohl Less- als auch CSS-Dateien im selben Bundle zuzulassen?

Answer 1

Ich hatte ein bisschen mehr einen Blick darauf, und versuchte, Bündel anstelle von Stylebundle zu verwenden, aber trotzdem Probleme hatte.Ich denke, das Problem ist speziell mit der Bootstrap.css-Datei mit einer gewünschten Syntax, die weniger nicht mag.

Answer 2

Ja, Sie haben Recht, der Transformator verkettet alle CSS/LESS-Inhalte, bevor er sie an den Konverter weitergibt.Allerdings sollte der Konverter das Vorhandensein von LESS und CSS nicht unterdrücken, da Sie jederzeit Standard-CSS in ein LESS-Stylesheet einbinden können.

Das Problem scheint zu sein, dass Sie a verwenden StyleBundle Objekt, dem bereits ein Transformator zugeordnet ist.Versuchen Sie es mit einem Generikum Bundle wie ich es in meiner Konfiguration mache, so:

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

Was Ihre eigene Antwort unten betrifft, so liegt das Problem mit der Datei „bootstrap.css“ nicht darin, dass der LESS-Transformer sie nicht mag, sondern wahrscheinlich in einem Pfadproblem für @imports. Stellen Sie sicher, dass Ihr LESS-Transformer etwas verwendet, um sicherzustellen, dass er die richtigen Pfade auflöst zu den beliebigen Abhängigkeits-Stylesheets.

Answer 3

Ich glaube, dass alle CSS gültig sind, weniger (aber nicht alle weniger gilt gültig CSS)

Wenn der generakodicetagcode an Ihre Bootstrap-CSS-Dateien angewendet wird, sollten keine Unterschied führen.

Es wird immer noch alle Dateien in eine CSS-Datei bündeln, um an den Browser zu liefern.

Es kann nur ein Performance problem während design-time sein.

Die korrekte Ausgabe wird immer noch produziert und zwischengespeichert verhindert, dass Run-Time Performance-Probleme.

Answer 4

Ich weiß, dass dies ein etwas alter Beitrag ist, aber mir ist etwas Seltsames aufgefallen, das für jemanden von Nutzen sein könnte ...

Das habe ich gefunden Bundle Das Objekt mag keine Bindestriche im Namen der CSS-Datei, wenn auch weniger Dateien enthalten sind.d.h.:

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

Funktioniert bei mir nicht, aber Folgendes funktioniert (in jqueryui-Dateinamen ändern):

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

Ändern Sie also den Dateinamen von "~/Content/bootstrap-responsive.css" Zu "~/Content/bootstrapresponsive.css" könnte das Problem sehr gut für Sie lösen.