Regrouper les fichiers Less et CSS ensemble

Question

J'ai l'impression que le regroupement devrait être utilisé pour regrouper un ensemble de fichiers que vous utilisez ensemble en une seule livraison au navigateur.Cela signifierait par exemple, pour mon style racine, que j'aimerais faire quelque chose comme ce qui suit :

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

Mais cela ne semble pas très bien fonctionner avec le technique de transformation personnalisée pour regrouper moins de fichiers car il semble qu'il regroupe tous les fichiers dans un seul fichier CSS avant de le transmettre à LessTransform.D'après ce que je peux dire, cette méthode ne fonctionne que si vous regroupez tous vos fichiers les moins nombreux.

Existe-t-il un moyen d'obtenir des bundles pour autoriser à la fois les fichiers less et css dans le même bundle ?

Answer 1

J'avais un peu plus d'un regard sur cela et j'ai essayé d'utiliser un paquet au lieu de stylebundle, mais j'ai toujours eu des problèmes.Je pense que le problème est spécifiquement à voir avec le fichier bootstrap.css avec une syntaxe qui n'aime pas moins.

Answer 2

Oui, vous avez raison, le transformateur concatène tout le contenu CSS/LESS avant de le transmettre au convertisseur.Cela dit, le convertisseur ne doit pas étouffer la présence à la fois de LESS et de CSS, car vous pouvez toujours inclure du CSS standard dans une feuille de style LESS.

Le problème semble être que vous utilisez un StyleBundle objet auquel un transformateur est déjà associé.Essayez d'utiliser un générique Bundle comme je le fais dans ma config, comme ceci :

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

Quant à votre propre réponse ci-dessous, le problème avec le fichier bootstrap.css n'est pas que le transformateur LESS ne l'aime pas, mais probablement un problème de chemin pour @imports, assurez-vous que votre transformateur LESS utilise quelque chose pour garantir qu'il résout les chemins appropriés. aux feuilles de style de toute dépendance.

Answer 3

Je crois que tout CSS est valide MOINS (mais tout MOINS n'est pas valide CSS)

Donc avoir le LessTransform appliqué à vos fichiers CSS bootstrap ne devrait faire aucune différence.

Il regroupera toujours tous les fichiers dans un seul fichier CSS à transmettre au navigateur.

Il se peut qu'il n'y ait qu'un performance problème pendant au moment de la conception.

La sortie correcte sera toujours produite et la mise en cache empêchera tout Durée les problèmes de performance.

Answer 4

Je sais que c'est un peu vieux post, mais j'ai remarqué quelque chose de bizarre qui pourrait être utile à quelqu'un...

J'ai trouvé ça Bundle l'objet n'aime pas les traits d'union dans le nom du fichier CSS lorsque moins de fichiers sont également inclus.c'est à 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"
            );

Cela ne fonctionne pas pour moi, mais ce qui suit fonctionne (changement en nom de fichier 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"
            );

Donc, changer le nom du fichier de "~/Content/bootstrap-responsive.css" à "~/Content/bootstrapresponsive.css" pourrait très bien régler le problème pour vous.