Estoy en el proceso de construcción de mi primer solo de aplicación Rails usando Rails 3.1.rc5. Mi problema es que quiero tener mi sitio representar los distintos archivos CSS de forma condicional. Estoy usando Blueprint CSS y estoy tratando de tener las ruedas dentadas/rieles de procesamiento screen.css la mayoría de las veces, print.css sólo cuando la impresión, y ie.css sólo cuando se accede al sitio de Internet Explorer.

Por desgracia, el valor predeterminado *= require_tree comando en el application.css manifiesto incluye todo en el assets/stylesheets directorio y los resultados en un desagradable CSS revoltijo. Mi solución actual es una especie de método de fuerza bruta donde me especificar todo de forma individual:

En la aplicación.css:

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

En mis hojas de estilo parcial (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 bonita. He hecho un par de horas de búsqueda a llegar tan lejos, pero tengo la esperanza de que hay una manera más fácil de hacerlo que he perdido. Si yo pudiera procesar selectivamente ciertos directorios (sin incluir los subdirectorios) sería hacer el proceso mucho menos rígido.

Gracias!

InformationsquelleAutor talon55 | 2011-08-20

3 Comentarios

  1. 223

    He descubierto una manera de hacer que sea menos rígida y a prueba de futuro por el uso de los activos de canalización, pero tener las hojas de estilo agrupados. No es mucho más simple que la solución, pero esta solución permite agregar automáticamente nuevos hojas de estilo sin tener que volver a editar la estructura entera de nuevo.

    Lo que quiero hacer es usar archivos de manifiesto a romper cosas. Primero tienes que re-organizar su app/assets/stylesheets carpeta:

    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

    A continuación, editar 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
     */

    Siguiente de actualizar el diseño de la aplicación de archivo:

    <%= 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 olvides incluir estos nuevos archivos de manifiesto en su config/environments/producción.rb:

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

    Actualización:

    Como Max señalado, si usted sigue esta estructura tiene que ser consciente de las referencias de imagen. Usted tiene algunas opciones:

    1. Mover las imágenes a seguir el mismo patrón
      • Tenga en cuenta que esto sólo funciona si las imágenes no son todos compartidos
      • Espero que esto no sea un motor de arranque para la mayoría ya que se complica demasiado las cosas
    2. Calificar la ruta de la imagen:
      • background: url('/assets/image.png');
    3. Utilizar SASS helper:
      • background: image-url('image.png');
    • Mientras que esta es una buena organización de los archivos, creo que aún se soluciona el problema esencial de la misma manera que la pregunta en sí no.
    • usted está en lo correcto de que la forma de la solución es esencialmente el mismo, pero mi propuesta que nos permite utilizar el activo de canalización para la totalidad de las hojas de estilo. No estoy seguro de si hay otra manera de forma selectiva incluyen parte de los estilos a menos que sea en una hoja de estilo. Al menos de esta manera podemos elaborar a sólo un puñado de los archivos CSS.
    • esto me ayudó mucho, gracias. Era exactamente la técnica que se necesita para tener diseños separados con sus propios bienes, pero todavía conseguir todo lo precompilado.
    • esta es mucho más limpio manera de lidiar con hojas de estilo… gracias por la sugerencia 🙂
    • Algo como esto en los Rieles de los Activos de Tubería guía sería bueno en realidad. gracias
    • Esto es realmente genial! Yo no sabía que el oleoducto trabajar de esta manera. Lo siento por la respuesta tardía =)
    • Hay una advertencia, sin embargo: si usted sigue esta estructura y el uso sencillo de .css de los archivos, todas las imágenes serán rotos. E. g. background: url('image.png') serán traducidos a la ruta /assets/all/image.png (mente la todos en la ruta). En lugar de esto funciona: background: url('/assets/image.png). Si hay una fácil solución por favor, publicarlo. Otro de SASS que ha ayudantes de los métodos que probablemente resolver la ruta correctamente.
    • Buen punto @Max! He actualizado la respuesta a incluir las 3 alternativas.
    • Yo uso el mismo esquema para coffeescript. Debo incluir manifiesto js archivos en config.assets.precompile?
    • sí. Ninguna de las hojas de estilo o JS/manifiesta que no siguen el patrón estándar necesita ser añadido a la precompilar matriz (véase: guides.rubyonrails.org/asset_pipeline.html#precompiling-assets)
    • Creo que es un poco engañoso, para decirle a la gente que tienen que re-organizar sus archivos. usted no tiene que requieren de un árbol, usted puede mantener la estructura de carpetas existente e incluir explícitamente a los archivos en su nuevo manifiesto. de esa manera, usted está tomando ventaja de la tubería, Y de no romper todas sus rutas de imagen, etc.
    • Justo lo suficiente, pero entonces usted tiene que recordar para incluir los nuevos archivos. Hablando desde la experiencia, es fácil olvidar. Además, no es romper todas las rutas de imagen, usted sólo tiene que utilizar el helper. Es una cuestión de equilibrio.
    • Para simplificar esto un poco, usted puede poner un archivo de manifiesto en cada sub-directorio y el uso de este Dir.glob(Rails.root.join('app/assets/*/*/manifest.*').to_s).map{|p| File.join(p.split(File::SEPARATOR)[-2..-1])} para precompilar todos los manifiestos.
    • Solo quiero añadir que falta una barra invertida al final de la manifiesta rompe la precompilación. He perdido más de la mitad de una hora en esto hasta que me vio. Los dos últimos caracteres del manifiesto debe ser */ .

  2. 10

    Encontré con este problema hoy en día.

    Acabó poniendo todos los IE específicas de las hojas de estilo en lib/assets/hojas de estilo y la creación de un archivo de manifiesto por la versión de IE. A continuación, en aplicación.rb añadir a la lista de cosas para precompilar :

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

    Y en sus diseños, condicionalmente incluyen los archivos de manifiesto y ya está bueno para ir!

Dejar respuesta

Please enter your comment!
Please enter your name here