Uso de la canalización de activos de Rails 3.1 para usar condicionalmente ciertos css

166

Estoy en el proceso de construir mi primera aplicación Rails solo usando Rails 3.1.rc5. Mi problema es que quiero que mi sitio procese los diversos archivos CSS condicionalmente. Estoy usando Blueprint CSS e intento que las ruedas dentadas / rieles se procesen la screen.cssmayor parte del tiempo, print.csssolo durante la impresión y ie.csssolo cuando se accede al sitio desde Internet Explorer.

Desafortunadamente, el *= require_treecomando predeterminado en el application.cssmanifiesto incluye todo en el assets/stylesheetsdirectorio y da como resultado una mezcla CSS desagradable. Mi solución actual es una especie de método de fuerza bruta donde especifico todo individualmente:

En application.css:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

En mis hojas de estilo parciales (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

Esto funciona pero no es especialmente bonito. He hecho algunas horas de búsqueda para llegar tan lejos, pero espero que haya una manera más fácil de hacerlo que acabo de perder. Si incluso pudiera renderizar selectivamente ciertos directorios (sin incluir subdirectorios), todo el proceso sería mucho menos rígido.

¡Gracias!

talon55
fuente

Respuestas:

223

He descubierto una manera de hacerlo menos rígido y a prueba de futuro al seguir usando la canalización de activos pero agrupando las hojas de estilo. No es mucho más simple que su solución, pero esta solución le permite agregar automáticamente nuevas hojas de estilo sin tener que volver a editar toda la estructura nuevamente.

Lo que desea hacer es usar archivos de manifiesto separados para dividir las cosas. Primero debes reorganizar tu app/assets/stylesheetscarpeta:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Luego edita los tres archivos de manifiesto:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

A continuación, actualice el archivo de diseño de su aplicación:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

Por último, no olvide incluir estos nuevos archivos de manifiesto en su configuración / entornos / production.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Actualizar:

Como señaló Max, si sigue esta estructura, debe tener en cuenta las referencias de imágenes. Tienes algunas opciones:

  1. Mueve las imágenes para seguir el mismo patrón
    • Tenga en cuenta que esto solo funciona si no se comparten todas las imágenes
    • Espero que esto no sea un comienzo para la mayoría, ya que complica demasiado las cosas.
  2. Califique la ruta de la imagen:
    • background: url('/assets/image.png');
  3. Use el ayudante SASS:
    • background: image-url('image.png');
gcastro
fuente
1
Si bien esta es una buena organización de los archivos, creo que aún resuelve el problema esencial de la misma manera que la pregunta en sí.
semperos
@semperos, tiene razón en que la forma de la solución es esencialmente la misma, pero mi propuesta aún nos permite usar la canalización de activos para la totalidad de las hojas de estilo. No estoy seguro de si hay otra forma de incluir selectivamente parte de los estilos a menos que esté en una hoja de estilos separada. Al menos de esta manera compilamos solo un puñado de archivos CSS.
gcastro
55
Algo como esto en la guía de Rails Asset Pipeline sería realmente bueno. gracias
Bashar Abdullah
3
Sin embargo, hay un problema: si sigues esta estructura y usas .cssarchivos simples , todas tus imágenes se romperán. Por ejemplo background: url('image.png'), será traducido al camino /assets/all/image.png(cuidado con todo en el camino). En cambio, esta funciona: background: url('/assets/image.png). Si hay una solución más fácil para esto, publíquela. Aparte de usar SASS que tiene métodos de ayuda que probablemente resuelvan la ruta correctamente.
Max
1
@ExiRe, sí. Cualquier hoja de estilo o archivo / manifiesto JS que no siga el patrón estándar debe agregarse a la matriz de precompilación (consulte: guides.rubyonrails.org/asset_pipeline.html#precompiling-assets )
gcastro
10

Encontré este problema hoy.

Terminé poniendo todas las hojas de estilo específicas de IE en lib / assets / stylesheets y creando un archivo de manifiesto por versión de IE. Luego, en application.rb, agréguelos a la lista de cosas para precompilar:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

¡Y en sus diseños, incluya condicionalmente esos archivos de manifiesto y listo!

Anthony Alberto
fuente