css - from - the asset is not present in the asset pipeline rails 5

Utilizando la canalización de activos de Rails 3.1 para usar condicionalmente ciertos CSS

Question

Estoy en el proceso de crear mi primera aplicación Rails solo con Rails 3.1.rc5. Mi problema es que quiero que mi sitio muestre los diversos archivos CSS condicionalmente. Estoy usando Blueprint CSS y estoy tratando de que los piñones / rieles rendericen screen.css mayor parte del tiempo, print.css solo cuando ie.css y ie.css solo cuando se accede al sitio desde Internet Explorer.

Desafortunadamente, el comando predeterminado *= require_tree en el manifiesto de application.css incluye todo en el directorio assets/stylesheets y da como resultado un revoltijo de CSS desagradable. Mi solución actual es una especie de método de fuerza bruta donde especifico todo de forma individual:

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 hasta aquí, pero espero que haya una manera más fácil de hacerlo que me he perdido. Si pudiera representar selectivamente ciertos directorios (sin incluir subdirectorios), todo el proceso sería mucho menos rígido.

¡Gracias!

Answer 1

Descubrí una forma de hacerlo menos rígido y a prueba de futuro al seguir usando el inventario de activos pero teniendo las hojas de estilo agrupadas. 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 quiere hacer es usar archivos de manifiesto separados para dividir las cosas. Primero debes reorganizar la carpeta de tu app/assets/stylesheets :

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, actualiza el archivo de diseño de la 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 config / environments / production.rb:

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

Actualizar:

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

1. Mueva las imágenes para seguir el mismo patrón
   • Tenga en cuenta que esto solo funciona si las imágenes no son todas compartidas
   • Espero que esto no sea un comienzo para la mayoría ya que complica las cosas demasiado
2. Califica la ruta de la imagen:
   • background: url(''/assets/image.png'');
3. Use el ayudante SASS:
   • background: image-url(''image.png'');

Answer 2

Encontré este problema hoy.

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

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

Y en sus diseños, incluya de manera condicional esos archivos manifiestos ¡y listo!

Answer 3

Esa es una forma muy buena de hacerlo. Yo uso clases condicionales en html o modernizr. Vea este artículo para una buena representación sobre qué hace qué. modernizr-vs-conditional-classes-on-html