application.css not including other style definitions

Question

Ruby 1.9.2, Rails 3.1

Here is my understanding as to how layouts should be applied:

a. application. html.erb has the following helper method -

`<%= stylesheet_link_tag    "application" %> `

and it basically says: "use application.css file and do whatever is mentioned there.

b. Application.css files has a directive to include all stylesheet files in the directory where it resides.

= `require_tree` .

(I have added the line above to the bottom of the application.css)

The problem is that the file products.css.scss is never applied to the page. When I go the the Developer Tools in chrome it shows that scaffolds.css is applied to the page. (Wanted to attach the pic but I can't as it is limited to new users)

I've been fighting with this thing for a while and can't figure it out. I need to find a way for application.css to do what it was supposed to do, to use the style definitions from the same directory and it is not happening.

UPDATE:

Here is the solution. in the index.htm.erb there was a block

<table class>
<% @products.each do |product| %>
  <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

I changed it to (see the first line)

<table class = "products">
<% @products.each do |product| %>
  <tr class="<%= cycle('list_line_odd', 'list_line_even') %>">

But the ting is - I have no idea why it started working, I have found this solution on the errata web page for the book that I'm reading, somebody just offered this as a solution. I'd appreciate if somebody can shed some light as to why this line helped.

It's actually Ruby 1.9.2 and Rails 3.1 :) It'll also help to include a tag like ruby-on-rails-3 and/or ruby-on-rails-3.1 — unrelativity
– unrelativity, Commented Nov 17, 2011 at 4:27
can you please post the code from application.css and can you confirm that products.css.scss has content? — stephenmurdoch
– stephenmurdoch, Commented Nov 17, 2011 at 4:36
@ stephenmurdoch application.css looks like this now (I removed the require_tree . from the bottom) /* * 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 . */ — Elijah
– Elijah, Commented Nov 17, 2011 at 4:46
@ stephenmurdoch ---- I've provided a solution (See the update section on the original post). but I'd appreciate if you can shed some light as to why this helped. ("products" corresponds to the table in my database and to the controller name) — Elijah
– Elijah, Commented Nov 19, 2011 at 6:18

natedavisolds · Accepted Answer · 2011-11-17 04:36:22Z

2

The directives to include are stylesheets are supposed to be in the comments only.

Drop the =require_tree. that is not in the comments and make sure that the comment directives are formatted with the same spacing.

You don't have to change it from the defaults.

answered Nov 17, 2011 at 4:36

natedavisolds

4,2951 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Elijah Over a year ago

OK, I removed the line and my application.css is back to it's default state. It didn't help unfortunately, still devtools show that scaffolds.css is applied.

natedavisolds Over a year ago

is there a scaffolds.css in one of the asset directories?

Elijah Over a year ago

@ natedavisolds ||| Yes, it is in the same directory as application.css. I've tried deleting it, but it doesn't help. Spooky... Correction: it does change something in a way that devtools show on the page 'user agent stylesheet' instead of scaffolds.css - but ot doesn't apply products.css.scss located in the same directory (the one I need to apply)

natedavisolds Over a year ago

=require_tree . loads all the styles. If you don't want it, you should delete it. Also, restart the server.

Elijah Over a year ago

1. Line has been removed as per comments above. Didn't help though. 2. Server has been restarted but it didn't help either. (In fact it shouldn't be restarted if I use default configuration created by the scafflding>)

|

farout · Accepted Answer · 2012-01-20 18:24:36Z

1

The answer is that if you look at the product.css.scss is has to have a table with a class as "products".

All the css directives are nested under the .products {}.

So if you do not have a table with a class set to "products", there then there is no css to be applied.

answered Jan 20, 2012 at 18:24

farout

111 bronze badge

Comments

Lifeform · Accepted Answer · 2012-04-09 21:29:15Z

1

The solution is as farout supplied (and easier than you should believe):

The scaffolding doesn´t tag your table-tag with the correct class, and you have to edit the code manually to insert the "products"-class for it:

<table class="products">

answered Apr 9, 2012 at 21:29

Lifeform

412 bronze badges

Comments

prasvin · Accepted Answer · 2011-11-17 04:36:08Z

0

*= require_tree .

should include all your stylesheets in the current directory. but why do you have it at two places. try removing the require tree from the final line.

answered Nov 17, 2011 at 4:36

prasvin

3,01925 silver badges28 bronze badges

Comments

andr · Accepted Answer · 2013-03-11 01:18:52Z

0

First, the line <table class=> in the code example is incomplete, has to be <table class="products">. Second, the line = require_tree at the file application.css, was not necessary for me, so comment it. Third, reload your localhost:3000/products or whatever is your page direction and if it doesn't work reload the server.

All that recomendations did work at least for me, try it!

edited Mar 11, 2013 at 1:18

andr

16.1k10 gold badges51 silver badges62 bronze badges

answered Mar 11, 2013 at 0:59

user2155104

1

Collectives™ on Stack Overflow

application.css not including other style definitions

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related