Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialLaura Mead
10,156 PointsThe CSS in my SASS files aren't reflecting in my browser?
I put in some CSS to the SASS files just like Jason did in his video, and neither my todo_lists.css.scss nor my todo_items.css.scss files seem to be applying. The sass gem is installed, everything is bundled, and I haven't changed the path that comes with Rails for the application.html.erb which looks like this:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
6 Answers
spalak
12,151 PointsHi - I'm having a similar problem, except when I view page source, I can find the SASS code, it just doesn't affect what I see on my browser. Any ideas why it's not showing up?
Thanks
Maciej Czuchnowski
36,441 PointsRun the rails server, go to localhost 3000, right click the page and do View Page Source or something similar to see the order in which your css/scss files are loaded and whether your own file is loading at all. It is possible that they are not included in the stylesheet list or that something else is overwriting your styles (they are CASCADING :) ).
Laura Mead
10,156 PointsAh, thanks for reminding me to check View Page Source, Maciej! It looks like they're not even getting loaded in, just my application.css file. Do you know the proper code for loading in SASS files with Rails? I thought that it would just automatically load in the files, but apparently not. :(
Laura Mead
10,156 PointsFigured it out! The new SASS files automatically created by Rails for my todo list and my todo items were not getting loaded into the application.html.erb.
Here is the proper code for loading in those separate files (todo_lists.css.scss and todo_items.css.scss):
<%= stylesheet_link_tag "todo_items", media: "all", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag "todo_lists", media: "all", "data-turbolinks-track" => true %>
Maciej Czuchnowski
36,441 PointsIn theory, instead of modifying the application.html.erb, you should list the files in proper order in the app/assets/stylesheets/application.css file like this:
*= require todo_items
*= require todo_lists
Preferably at the very end, so that they get loaded last. See if that works, because it is the recommended way to do it (it's called the asset pipeline and treehouse even has a separate course for that at http://teamtreehouse.com/library/the-rails-asset-pipeline-and-styling ).
Laura Mead
10,156 PointsHuh, I tried that and it didn't seem to work. Do you know why that might be? I put the exact same code at the bottom of my application.css page like you showed it in your answer.
Maciej Czuchnowski
36,441 PointsThat is weird and currently I have no answer for you :)
Laura Mead
10,156 PointsNo worries, thanks for your help nonetheless!
William Bode
7,105 PointsHi there,
I had the same problem. Unfortunately, I don't know how exactly I fixed it, even though I just copy-pasted index.html.erb from jasons files to my files (to see if there is error, which somehow was). Probably some wrong class/id or something.
Mary Dickson
7,293 PointsI am having the same problem as spalak above. Stylesheet seems to load, but is not affecting browser view. I tried the proposed fixes from others in this thread and neither worked.