La paquetización de menos y los archivos css juntos

Question

Me siento como agrupación debe ser utilizado para agrupar un montón de archivos que se utiliza en una sola entrega al navegador.Esto significaría, por ejemplo, para mi raíz estilo que me gustaría hacer algo como lo siguiente:

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

Pero esto no parece funcionar muy bien con el transformación personalizada técnica para agrupar los archivos de menos como parece que pre-agrupa todos los archivos en un único archivo css antes de pasar a la LessTransform.Por lo que puedo decir que este método sólo funciona si se agrupan todos sus archivos juntos.

Es allí una manera de conseguir paquetes para permitir que tanto los menos y los archivos css en el mismo paquete?

Answer 1

Me eché un poco más lejos en esto e intenté usar el paquete en lugar de STYLEBUNDLE, pero aún tenía problemas.Creo que el problema está específicamente para ver con el archivo Bootstrap.css que tiene alguna sintaxis que no le gusta menos.

Answer 2

Sí tienes razón, el transformador se concatena todos los CSS/LESS contenido antes de pasar a lo largo del convertidor.Dicho esto, el convertidor no debe ser la asfixia de la presencia tanto de MENOS y CSS, como se puede siempre incluyen el estándar CSS dentro de una MENOS de la hoja de estilos.

El problema parece ser que usted está usando un StyleBundle objeto que ya tiene un transformador asociado.Trate de usar un genérico Bundle como hago en mi config, como este:

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

En cuanto a tu respuesta, el problema con el arranque.archivo css no es que MENOS del transformador no le gusta, pero, probablemente, la ruta problema para @importaciones, asegúrese de que su MENOR transformador utiliza algo para asegurarse de que se resuelva el camino apropiado para la dependencia de las hojas de estilo.

Answer 3

Yo creo que todos los CSS es válido MENOS (pero no en todos, MENOS es válido CSS)

Así que tener la LessTransform aplicado a su bootstrap css archivos no hace ninguna diferencia.

Todavía habrá que agrupar todos los archivos en un archivo css para entregar a la del navegador.

No sólo podría ser un rendimiento problema durante en tiempo de diseño.

La salida correcta todavía será producido y el almacenamiento en caché de evitar cualquier en tiempo de ejecución problemas de rendimiento.

Answer 4

Sé que esto es un poco de una publicación vieja, pero he notado algo raro que pueda ser de utilidad para alguien ...

He encontrado que a los objetos de Bundle no le gustan los guiones en el nombre del archivo CSS cuando también se incluyen menos archivos.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"
            );

no funciona para mí, pero lo siguiente hace (cambia a JQueryui FileName):

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

Por lo tanto, cambiar el nombre de archivo de "~/Content/bootstrap-responsive.css" a "~/Content/bootstrapresponsive.css" podría muy bien, ordenar el problema para usted.