CODEWITHSUNDEEP
ruby-on-railscssruby-on-rails-3asset-pipelineassets
Jamie
Jamie

Reputation: 403

CSS is not loading in app

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?

Upvotes: 35

Views: 60318

Answers (18)

David
David

Reputation: 4847

The problem for me (with Rails 7.0.4) was that I had a local public/assets folder. After this was removed it was working again. "If precompiled assets are available, they will be served — even if they no longer match the original (uncompiled) assets, even on the development server."

Upvotes: 0

Mirror318
Mirror318

Reputation: 12663

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.

Upvotes: 3

priyankvex
priyankvex

Reputation: 6040

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] %>

Upvotes: 2

Andrea.cabral
Andrea.cabral

Reputation: 338

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).

Upvotes: 2

daveferrara1
daveferrara1

Reputation: 97

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.

Upvotes: 1

ruby_object
ruby_object

Reputation: 1266

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.

Upvotes: 4

root
root

Reputation: 470

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.

Upvotes: 0

scientiffic
scientiffic

Reputation: 9415

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>

Upvotes: 2

Travis Pessetto
Travis Pessetto

Reputation: 3298

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.

Upvotes: 1

Farzia
Farzia

Reputation: 11

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

Upvotes: 1

Alex D
Alex D

Reputation: 55

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

Upvotes: 3

Putnik
Putnik

Reputation: 6794

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.

Upvotes: 1

Vladimir Milanovic
Vladimir Milanovic

Reputation: 11

Change index.html.erb

<table class="products">

Upvotes: 1

AndrewPK
AndrewPK

Reputation: 6150

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.

Upvotes: 3

Michael Durrant
Michael Durrant

Reputation: 96484

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

Upvotes: 11

Aldo &#39;xoen&#39; Giambelluca
Aldo &#39;xoen&#39; Giambelluca

Reputation: 12455

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.

Upvotes: 0

Substantial
Substantial

Reputation: 6682

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.

Upvotes: 24

koly
koly

Reputation: 21

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!

Upvotes: 2

Related Questions