ruby on rails - rails - CSS no se está cargando en la aplicación
the asset is not present in the asset pipeline (17)
bien, modificar la aplicación / views / layouts / application.html.erb puede funcionar cambiar la aplicación "stylesheet_link_tag" "" a "stylesheet_link_tag" depot "".
¡Ojalá te ayude!
CSS no se cargará en mi aplicación de rieles. Este es el archivo index.html.erb ubicado en la vista / productos:
<h1>Listing products</h1>
<table>
<% @products.each do |product| %>
<tr class="<%= cycle(''list_line_odd'', ''list_line_even'') %>">
<td>
<%= image_tag(product.image_url, :class=> ''list_image'') %>
</td>
<td class="list_description">
<dl>
<dt><%= product.title %></dt>
<dd><%= truncate(strip_tags(product.description), :length=> 80) %></dd>
</dl>
</td>
<td class="list_actions">
<%= link_to ''Show'', product %><br/>
<%= link_to ''Edit'', edit_product_path(product) %><br/>
<%= link_to ''Destroy'', product,
:confirm=> ''Are you sure?'',
:method=> :delete %>
</td>
</tr>
<% end %>
</table>
<br />
<%= link_to ''New product'', new_product_path %>
Luego tengo el archivo application.html.erb ubicado en view / layouts. Este archivo debe vincular el css a html.
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Mi archivo css products.css.scss ubicado en assets / stylesheets se ve así:
.products {
table {
border-collapse: collapse;
}
table tr td {
padding: 5px;
vertical-align: top;
}
.list_image {
width: 60px;
height: 70px;
}
.list_description {
width: 60%;
dl {
margin: 0;
}
dt {
color: #244;
font-weight: bold;
font-size: larger;
}
dd {
margin: 0;
}
}
.list_actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.list_line_even {
background-color: #e0f8f8;
}
.list_line_odd {
background-color: #f8b0f8;
}
}
Y finalmente mi archivo de mi 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 .
*/
Todo se ve bien para mí y, como entiendo, application.css reúne todos los demás archivos CSS, por lo que no es necesario que los vincules todos manualmente. ¿Estoy en lo correcto?
También aquí está el registro del servidor cuando cargo la página:
Started GET "/products" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Processing by ProductsController#index as HTML
Product Load (0.1ms) SELECT "products".* FROM "products"
Rendered products/index.html.erb within layouts/application (7.4ms)
Completed 200 OK in 26ms (Views: 24.2ms | ActiveRecord: 0.4ms)
Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /scaffolds.css - 304 Not Modified (0ms)
Started GET "/assets/all.css" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /all.css - 404 Not Found (4ms)
ActionController::RoutingError (No route matches [GET] "/assets/all.css"):
Rendered /Library/Ruby/Gems/1.8/gems/actionpack- 3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.5ms)
Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /products.css - 304 Not Modified (0ms)
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /jquery.js - 304 Not Modified (0ms)
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /jquery_ujs.js - 304 Not Modified (0ms)
Started GET "/assets/products.js?body=1" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /products.js - 304 Not Modified (0ms)
Started GET "/assets/defaults.js" for 127.0.0.1 at Wed Dec 07 20:53:10 +0000 2011
Served asset /defaults.js - 404 Not Found (3ms)
ActionController::RoutingError (No route matches [GET] "/assets/defaults.js"):
Rendered /Library/Ruby/Gems/1.8/gems/actionpack- 3.1.3/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (0.9ms)
¿Por qué mi aplicación no muestra ningún CSS?
¿Tiene esto en su ProductsController
, o si está ausente, ApplicationController
?
layout "application"
Tienes un inventario de pre activo <%= stylesheet_link_tag :all %>
alguna parte, que normalmente incluye todas las hojas de estilo en /public/stylesheets
, pero indica a la canalización de activos que busque un archivo llamado all.css
.
Como <%= stylesheet_link_tag :all %>
claramente no está en su diseño application.html.erb
, se está representando algún otro diseño. Caza hacia abajo y / o asegúrate de que tu (s) controlador (es) estén llamando al diseño correcto.
Ejecutar rake assets:precompile
para compilar y copiar tus css desde / assets to / public (rieles 3.1+)
Es tarde y tal vez me perdí algo, ¿a qué te refieres con "CSS no se cargará en mi aplicación Rails"? Si ve el código fuente de la página en su navegador, ¿ve los elementos del enlace de la hoja de estilo de su aplicación? ¿Su mesa está labrada como aspectada?
De lo que veo en el registro del servidor:
Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 [...]
Served asset /products.css - 304 Not Modified (0ms)
Su aplicación está usando los archivos CSS.
Por cierto, como dijiste la aplicación.css "carga" los otros archivos CSS, esto se hace usando require_tree.
Es posible que desee cambiar su etiqueta de enlace de la hoja de estilo. Veo que estás usando actualmente
<%= stylesheet_link_tag "application" %>
Una aplicación de rieles recién generada debe tener las siguientes dos etiquetas de enlace que incluirán automáticamente todas las hojas de estilo y javascript:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
Pero me parece que está de acuerdo con el ''Desarrollo web ágil con el libro Rails'', en cuyo caso, es posible que desee utilizar lo siguiente:
<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", :media => "all" %>
<%= javascript_include_tag "application" %>
Espero que pueda ser de ayuda para usted y para los futuros lectores del libro Desarrollo web ágil con rieles que están pasando por el ejemplo de aplicación de depósito.
Cambiar index.html.erb
<table class="products">
Parece que obtienes este código del libro "Desarrollo web ágil con rieles". En este caso, tal vez una línea es incorrecta en la aplicación / views / layouts / application.html.erb: cambio
<body>
a
<body class=''<%= controller.controller_name %>''>
Al menos funciona para mí.
Me encontré con el mismo problema mientras seguí el libro de desarrollo web ágil con rieles. Intenté todas las soluciones recomendadas pero fue en vano.
Esto es lo que funcionó para mí:
En el archivo aplication.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class=''<%= controller.controller_name %>''>
<!-- END_HIGHLIGHT -->
<%= yield %>
</body>
</html>
Lo más destacado es la parte importante.
Encontré la solución aquí: http://pragprog.com/titles/rails4/errata , donde dice:
Sam Ruby dice: http://pragprog.com/titles/rails4/source_code .
Espero que todavía ayude
Alex
Enfrenté el mismo problema, pero logré que mi CSS funcionara. Cambié todas las cadenas entre comillas dobles en el archivo index.html.erb
. No hay necesidad de cambiar nada. Estoy usando carriles 3.2.6
Si compiló sus activos una vez en su máquina local para implementarlos, lo hará para que intente usarlos. Puede usar rake assets:precompile
para actualizar. O puede ir a la carpeta tmp (en la raíz de la aplicación Rails) y eliminar todo en caché / assets y cache / sass. Luego, después de eso, puede acceder a / public / assets y eliminar todo con un hash después de él (las cadenas aleatorias). Luego reinicia el servidor. Eso es lo que funciono para mi.
Acabo de hacerlo funcionar. Tuve que colocar el archivo depot.css
en la app/views/assets/stylesheets
(NO el directorio público, como decía en el libro), y cambié el enlace de la hoja de estilo en application.html.erb
para que se vea así:
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "depot"%>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Estaba teniendo el mismo problema con Rails 3.2.0 con ruby-2.0.0-p247. Intenté cada sugerencia en este hilo. No tengo idea de por qué, pero cambiar a Rails 3.2.12 lo solucionó.
Mi caso solucionando un error en mi hoja de estilo y en ejecución:
$ RAILS_ENV=development rake assets:clean
ha arreglado el problema
Al ejecutar el comando anterior, se eliminan los archivos CSS generados y se fuerzan los rieles para regenerar el resultado de CSS de los archivos Sass o SCSS.
Del libro: Desarrollo web ágil con Rails 4
en ~ Página 72.
Encontrará una pequeña flecha al lado de la etiqueta en el gráfico.
Con este cambio, vamos a incluir el nombre del controlador en <body class="">
para que el nombre de la clase cambie en función del controlador.
En tu archivo SCSS. "products.css.scss" está comenzando con el estilo de "CSS CLASS" para los productos. En nuestro caso, es .products con un grupo de estilos anidados dentro de él.
Un pequeño cambio que básicamente evita que la clase .products se aplique al cuerpo, lo que a su vez impide que el resto se ladee también.
en su archivo ''layout.html.erb'', la canalización de activos está obteniendo la aplicación.css solo como puede leer en su archivo application.html.erb.
Intentaría agregar la línea ''@import'' productos "''en ese archivo application.css. Tuve el mismo problema y pude arreglarlo de esa manera (usando rails 4.1).
Esto podría ayudar a alguien a buscar esto. Tuve el problema similar. En mi caso, css especificado estaba siendo anulado por otras propiedades de archivos css.
Intente agregar esta línea a su application.html.erb.
<%= stylesheet_link_tag params[:controller] %>
Hacer que el controlador sea un elemento secundario de ApplicationController
Para conectar su controlador (y sus vistas) a la tubería, asegúrese de que su controlador sea hijo de ApplicationController
.
class ProductsController < ApplicationController
# all your code
end
Enlace a su archivo raíz css
También asegúrese de que su application.html.erb
tenga esta línea:
<%= stylesheet_link_tag ''application'', media: ''all'' %>
Esto agrega el archivo core application.css
a sus vistas.
Agregue todos los archivos css a través de su archivo raíz
Finalmente, asegúrese de que su application.css
tenga esta línea:
*= require_tree .
Si todos están en su lugar, todos los archivos en la app/assets/stylesheets/
se incluirán en la tubería css.