Agrupando menos y archivos css juntos

Tengo ganas de agrupar se debe utilizar para agrupar un grupo de archivos que se utilizan juntos en una sola entrega en el navegador. Esto significaría, por ejemplo, para mi estilo de raíz me gustaría hacer algo como lo siguiente:Agrupando menos y archivos css juntos

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 custom transform technique for bundling less files ya que parece que se pre-haces de todo el archivos en un solo archivo css antes de pasarlo a LessTransform. Por lo que puedo decir, este método solo funciona si agrupa todos sus archivos menos juntos.

¿Hay alguna manera de obtener paquetes para permitir tanto archivos css como menos en el mismo paquete?

Fuente

2012-09-30 Luke McGregor

Creo que el 'StyleBundle' ya tiene un transformador CssMinify registrado cuando crea una instancia. En el código que publicaste significa que intentará minimizar el archivo Less antes del transformador menos. Utilice el tipo simple 'Bundle' o borre la lista de Transformaciones antes de agregar menos transformador. – rmac

@rmac esto suena exactamente como lo que está ocurriendo. Daré una oportunidad. –

Mis disculpas, inicialmente había considerado esto. Pero pensé * que había revisado 'StyleBundle' /' Bundle' dentro del enlace que diste y lo descarté. Pero al revisar el blog, veo que estaba equivocado. Sospecho que este es el caso también. – Sethi

He echado un vistazo más de esto e intenté usar Bundle en lugar de StyleBundle, pero todavía tenía problemas. Creo que el problema tiene que ver específicamente con el archivo bootstrap.css que tiene cierta sintaxis que a menos no le gusta.

Fuente

2012-10-07 01:32:37

Creo que todos los CSS es válido MENOS (pero no todos menos es válido CSS)

Así que tener la LessTransform aplica a los archivos CSS de arranque no debe hacer ninguna diferencia.

Seguirá agrupando todos los archivos en un archivo CSS para entregar al navegador.

Puede que solo haya problema de rendimiento durante tiempo de diseño.

Se producirá la salida correcta y el almacenamiento en caché evitará cualquier problema de rendimiento en tiempo de ejecución.

Fuente

2012-10-01 13:31:12 Sethi

También fue mi primer pensamiento (ya que menos * es * un superconjunto de css), sin embargo, algo sucede primero incluso antes de que se convierta en menos "romper" el paquete cuando se incluyen tanto archivos css como menos (pero curiosamente cuando tienes solo menos). –

Sí, tiene razón, el transformador concatena todos los contenidos CSS/LESS antes de pasarlo junto con el convertidor. Dicho esto, el convertidor no debería estar sofocando la presencia de LESS y CSS, ya que siempre puede incluir CSS estándar dentro de una hoja de estilo LESS.

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

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 su propia respuesta a continuación, el problema con el archivo bootstrap.css no es que el transformador MENOS no le gusta, pero probablemente sea un problema de ruta para @imports, asegúrese de que su transformador LESS utiliza algo para asegurarse de que resuelve las rutas adecuadas a las hojas de estilos de dependencia.

Fuente

2012-10-12 22:35:35

Sé que esto es un poco de una entrada antigua, pero me he dado cuenta de algo extraño que pueda ser de utilidad para alguien ...

he encontrado que Bundle objeto no le gustan los guiones en el nombre del archivo css cuando también se incluyen menos archivos. es decir:

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 el siguiente no (el cambio de nombre de archivo a 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" 
      );

Así, cambiando el nombre del archivo de "~/Content/bootstrap-responsive.css" a "~/Content/bootstrapresponsive.css" podría muy bien resolver el problema de tú.

Fuente

2015-10-15 09:58:45 alord

Agrupando menos y archivos css juntos

Respuesta

Cuestiones relacionadas