CSS is not loading in app

ruby-on-rails css ruby-on-rails-3 asset-pipeline assets

54,679

Solution 1

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.

Solution 2

Run rake assets:precompile to compile and copy your css from /assets to /public (rails 3.1+)

Solution 3

I my case fixing an error in my style sheet and running:

$ RAILS_ENV=development rake assets:clean

has fixed the problem.

Running above command deletes your generated CSS files and forces rails to regenerate the CSS output from your Sass or SCSS files.

Solution 4

You might want to change your stylesheet link tag. I see you're currently using

<%= stylesheet_link_tag  "application" %>

A freshly generated rails app should have the following two link tags which will automatically include all stylesheets and javascript:

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>

But it seems to me that you're going along with the 'Agile Web Development with Rails Book', in which case, you might want to use the following:

<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", :media => "all" %>
<%= javascript_include_tag "application" %>

I hope I could be of help to you, and to future readers of the Agile Web Development with Rails book who are going through the depot application example.

Solution 5

I stumbled upon the same problem while following the Agile Web Development with Rails book. Tried all the recommended solutions but to no avail.

Here's what worked for me:

In the aplication.html.erb file:

<!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>

The highlight is the important part.

Found the solution here: http://pragprog.com/titles/rails4/errata, where it says:

Sam Ruby says: http://pragprog.com/titles/rails4/source_code.

Hope it still helps.

Alex

View more solutions

54,679

Author by

Jamie

Updated on April 28, 2020

Comments

Jamie about 4 years

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?