Menu
CSS won't load in my rails app. This is index.html.erb file located in view/products:
<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 %> Then I have the application.html.erb file located in view/layouts. This file should link the css to html.
<!DOCTYPE html> <html> <head> <title>Depot</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html> My css file products.css.scss located in assets/stylesheets looks like this:
.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; } } And finally my my application.css file looks like this:
/* * 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 . */ Everything looks okay to me and as I understand the application.css gathers up all the other css files so you don't have to link them all manually. Am I correct?
Also here is the server log when I load the page:
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) Why is my app not showing any CSS?
497
This usually happens when the browser serves a cached version of your CSS file. To invalidate the cache and serve the latest version of your CSS file, you can perform a hard reload on the browser.
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages such as CoffeeScript, Sass and ERB. Prior to Rails 3.1 these features were added through third-party Ruby libraries such as Jammit and Sprockets.
Basically, the following is the step for loading a css static file : 1. Create a static folder inside the app folder. The following is the actual structure showing where is the static folder exists :
That error message is informing that the static file with the css format file is not loaded. This is actually happening after executing a Django web-based application framework. The following is the actual execution command for starting or running a Django web-based application framework :
Link to your root css file Also make sure your application.html.erbhas this line: <%= stylesheet_link_tag 'application', media: 'all' %> This adds the core application.cssfile to your views. Add all css files through your root file Finally make sure your application.csshas this line: *= require_tree .
Served asset /products.css - 304 Not Modified (0ms) Your application is using the CSS files. BTW, as you said the application.css "load" the other CSS files, this is done using require_tree.
Do you have this in your ProductsController, or if absent, ApplicationController?
layout "application" You've got a pre-asset pipeline <%= stylesheet_link_tag :all %> somewhere, which normally includes all stylesheets in /public/stylesheets, but it's telling asset pipeline to look for a file named all.css.
Since <%= stylesheet_link_tag :all %> is clearly not in your application.html.erb layout, some other layout is being rendered. Hunt it down, and/or ensure your controller(s) are calling the correct layout.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
