ruby on rails 3 - present - ¿Cómo carga uno un marco CSS en Rails 3.1?
the asset "application.css" is not present in the asset pipeline. (7)
El resultado final de un archivo SASS traducido es en realidad un archivo css, por lo que no debería cambiar la forma en que incluye sus hojas de estilo.
Además, el hecho de que la gema SASS esté habilitada no significa que no pueda usar archivos css simples de vanilla simultáneamente. Por lo tanto, no debería tener problemas para incluir los archivos blueprint css.
Sin embargo, si quieres ir solo a SASS, te recomiendo que revises la gema de la brújula que tiene un buen soporte para blueprint:
También contiene soporte para hojas de estilo y macros ie-specific.
Estoy intentando cargar un marco CSS, Blueprint, en mi aplicación Rails 3.1.
En Rails 3.0+, tendría algo como esto en mis vistas / layouts / application.html.erb:
<%= stylesheet_link_tag ''blueprint/screen'', ''application'' %>
<%= stylesheet_link_tag ''blueprint/print'', ''media'' => ''print'' %>
<!--[if lt IE 8]>
<%= stylesheet_link_tag ''blueprint/ie'' %>
<![endif]-->
Sin embargo, Rails 3.1 ahora usa SASS. ¿Cuál sería la forma correcta de cargar estos archivos CSS de Blueprint?
Actualmente, tengo el directorio de planos en la aplicación / assets / stylesheets /
Mi aplicación / assets / stylesheets / application.css se ve así:
/*
* This is a manifest file that''ll automatically include all the stylesheets available in this directory
* and any sub-directories. You''re free to add application-wide styles to this file and they''ll appear at
* the top of the compiled file, but it''s generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
¿Debo hacer algo con application.css para que cargue los archivos necesarios de Blueprint? ¿Si es así, cómo?
En segundo lugar, ¿cómo proporcionaría algún tipo de condición para verificar IE8, cargar blueprint / ie.css?
EDITAR:
Hmmm, volver a cargar la página web de la aplicación. Rails 3.1 incluye los archivos Blueprint. Incluso si los archivos css están en una carpeta (en este caso: app / assets / stylesheets / blueprint).
Lo que me deja con dos preguntas
- ¿Cómo se debe aplicar la condición if lt IE 8 usando SASS?
- ¿Cómo se carga un archivo css para el formato de impresión (es decir, <% = stylesheet_link_tag ''blueprint / print'', ''media'' => ''print''%>) utilizando SASS?
Si alguien más se pregunta cómo lo hice al final.
quite
*= require_tree .
Mi aplicación / assets / stylesheets / application.css , ahora se ve así:
/*
* This is a manifest file that''ll automatically include all the stylesheets available in this directory
* and any sub-directories. You''re free to add application-wide styles to this file and they''ll appear at
* the top of the compiled file, but it''s generally better to create a new file per style scope.
*= require_self
*= require ''blueprint/screen''
*= require ''colorbox/colorbox''
*= require ''uploadify''
*= require ''scaffold''
*= require ''main''
*/
Y en app / views / layouts / application.html.erb , tengo:
<html>
<head>
<title><%= yield(:title).present? ? yield(:title) : ''Foobar'' %></title>
<%= favicon_link_tag %>
<%= stylesheet_link_tag ''application'' %>
<%= javascript_include_tag ''application'' %>
<%= stylesheet_link_tag ''blueprint/print'', ''media'' => ''print'' %>
<!--[if lt IE 8]>
<%= stylesheet_link_tag ''blueprint/ie'' %>
<![endif]-->
...
Espero que esto ayude a alguien.
Este blog tiene la solución que creo que estás buscando (como yo).
No coloque el blueprint en la app/assets porque se require_tree en require_tree . No lo publique porque no es adonde van los activos. Colóquelo en el vendor/assets/stylesheets luego vendor/assets/stylesheets en application.html.erb antes de su propia application.css como tal:
<%= stylesheet_link_tag ''blueprint/screen'', :media => "screen, projection" %>
<%= stylesheet_link_tag ''blueprint/print'', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag ''blueprint/ie'', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
Absolutamente de acuerdo con su solución, no crea que "require_tree" es una buena práctica en application.css, incluirá cualquier cosa, aparentemente es demasiado agresivo. He luchado durante un tiempo, finalmente, elegí exactamente la misma solución, uso la aplicación para incluir esos estilos de andamios y luego uso etiquetas HTML para incluir algunos estilos opcionales y condicionales. Gracias.
Aunque Rails 3.1 (RC) permite el uso de archivos SASS, no lo fuerza. Los archivos en su /public/stylesheets todavía serán servidos muy bien.
Si desea activar el analizador SASS (y utilizar el nuevo marco), cambie el nombre de my_styles.css por my_styles.css.scss y my_styles.css.scss en la carpeta /app/assets/stylesheets . A continuación, incluya solo su application.css en su application.erb.html luego de descomentar las líneas require_self / require_tree en él.
Para obtener más información, aquí hay un blog que detuve después de una rápida búsqueda en Google: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html
En cuanto a la cosa IE 8. Hubo un error en IE no siempre las condiciones de ejecución, así que prueba
<!--[if IE 8.000]><!--> <link href=''./design/style-ie-8.css'' rel=''stylesheet'' type=''text/css'' /> <!--<![endif]-->
es un poco de hackeo para tratar de restablecer el analizador para ejecutar la regla
Aquí se explica cómo usar la gema ''blueprint-rails'' en Rails 3.1
Añade la gema ''blueprint-rails'':
/ Gemfile
gem ''blueprint-rails'', , ''~> 0.1.2''
Agregue los archivos de blueprint comunes al manifiesto para que se precompilen en application.css:
/app/assets/stylesheets/application.css
/*
*= require ''blueprint''
*/
Agregue el application.css, que contendrá los archivos de blueprint comunes. También agregue print.css y ie.css condicionalmente:
/Views/layouts/application.html.erb
<%= stylesheet_link_tag ''application'' %>
<%= stylesheet_link_tag ''blueprint/print'', ''media'' => ''print'' %>
<!--[if lt IE 8]>
<%= stylesheet_link_tag ''blueprint/ie'' %>
<![endif]-->
Debido a los condicionales print.css y ie.css son necesarios como archivos separados fuera de la application.css (y no están incluidos por defecto en el requerimiento ''blueprint''). Entonces, tenemos que agregarlos a:
/Configuration/envoirnments/production.rb
# Separate assets
config.assets.precompile += [''blueprint/print.css'', ''blueprint/ie.css'']
Entonces corre:
bundle exec rake assets:precompile
Una forma diferente de hacer las cosas:
Hacer aplicación / assets / stylesheets / custom.css
A continuación, cambie custom.css para usar los archivos necesarios:
/*
*= require_self
*= require ''colorbox/colorbox''
*= require ''uploadify''
*= require ''scaffold''
*= require ''main''
*/
Finalmente, cambie la etiqueta del enlace en su diseño (asegúrese de eliminar la hoja de estilo de la "aplicación")
= stylesheet_link_tag "custom"
A continuación, puede agregar manualmente cualquier otra hoja de estilo (como "ie" specific) y otros grupos de hojas de estilo (como blueprint para cargar todos los archivos de blueprint ...)
Es posible que también necesite (en su producción.rb)
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(custom.css)