CSS is not loading in app

33
votes

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?

17
ruby-on-railscssruby-on-rails-3asset-pipelineassets
Are you sure the asset pipeline is enabled? Does not look like it. – Robin
Im pretty sure it is. In the file config/application.rb it has the line config.assets.enabled = true. Is there a command I can enter to check? – Jamie
Is all.css a css file you wrote? – Robin
I'm getting a routing error when I try to access the all.css file in a browser. – Jamie
Is this a brand new Rails 3.1+ app, or was it migrated up from a previous version? – Evan

17 Answers

25
votes

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.

9
votes

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

6
votes

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.

3
votes

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.

3
votes

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

3
votes

Make controller a child of ApplicationController

To hook up your controller (and its views) to the pipeline, make sure your controller is a child of ApplicationController.

class ProductsController < ApplicationController
  # all your code
end

Link to your root css file

Also make sure your application.html.erb has this line:

<%= stylesheet_link_tag 'application', media: 'all' %>

This adds the core application.css file to your views.

Add all css files through your root file

Finally make sure your application.css has this line:

*= require_tree .

If all those are in place, every file in app/assets/stylesheets/ will be included in the css pipeline.

2
votes

well, modify the app/views/layouts/application.html.erb may work change the "stylesheet_link_tag "application"" to "stylesheet_link_tag "depot"".

I wish it will help you!

2
votes

Just got it to work. I had to place the depot.css file in app/views/assets/stylesheets (NOT the public directory, as it said in the book), and I changed the stylesheet link in application.html.erb to look like this:

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag "depot"%>
  <%= javascript_include_tag  :defaults %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>
2
votes

in your file 'layout.html.erb', the asset pipeline is getting the application.css only as you can read on your file application.html.erb.

I would try to add the line '@import "products"' in that application.css file. Had the same issue and was able to fix it that way (using rails 4.1 though).

2
votes

This might help someone looking this up. I had the similar issue. In my case css specified was being overridden by other css files properties.

Try adding this line to your application.html.erb.

<%= stylesheet_link_tag params[:controller] %>
1
votes

Change index.html.erb

<table class="products">
1
votes

It looks like you get this code from "Agile Web Development with Rails" book. In this case perhaps one line is incorrect in app/views/layouts/application.html.erb: change 

<body>

to

<body class='<%= controller.controller_name %>'>

At least it works for me.

1
votes

I faced the same problem, but I got my css to work... I just changed all the single quoted strings to double quotes in the index.html.erb file. There is no need to change anything. I'm using rails 3.2.6

1
votes

If you've compiled your assets once on your local machine to deploy it will make it so it will try to use those. You can use rake assets:precompile to update. Or you can go into your tmp folder (in the root of the rails app) and delete everything in cache/assets and cache/sass. Then after that you can go into /public/assets and delete everything with a hash after it (the random strings). Then restart the server. That is what worked for me.

1
votes

From the book: Agile Web Development with Rails 4

on ~Page 72.

You'll find a small arrow next to the tag in the graphic.

With this change we are going to include the controller name in the <body class=""> so that the class name changes based on the controller.

In your SCSS file. "products.css.scss" is starting with styling the "CSS CLASS" for products. In our case it is .products with a bunch of styles nested inside it.

A small change that basically prevents the .products class from being applied to the body, which in turn prevents the rest from being styled as well.

0
votes

It's late and maybe I missed something, what do you mean for "CSS won't load in my rails app"? If you view the page source code in your browser do you see the stylesheet link elements of your application? Is your table styled as aspected?

From what I see in the server log:

Started GET "/assets/products.css?body=1" for 127.0.0.1 at Wed Dec 07 [...]
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.

0
votes

I was having this same issue with Rails 3.2.0 with ruby-2.0.0-p247. I tried every suggestion in this thread. I have no idea why, but switching to Rails 3.2.12 fixed it.