This is how i solved the styling issue: (excuse the Haml)
%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
= yield
This way i start all the page specific .css.sass files with:
#post
/* Controller specific code here */
&#index
/* View specific code here */
&#new
&#edit
&#show
This way you can easily avoid any clashes.
Hope this helped some.
I've discovered a way to make it less rigid and future proof by still using the asset pipeline but having the stylesheets grouped. It's not much simpler than your solution, but this solution allows you to automatically add new stylesheets without having to re-edit the whole structure again.
What you want to do is use separate manifest files to break things up. First you have to re-organize your app/assets/stylesheets folder:
app/assets/stylesheets
+-- all
+-- your_base_stylesheet.css
+-- print
+-- blueprint
+-- print.css
+-- your_print_stylesheet.css
+-- ie
+-- blueprint
+ ie.css
+-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css
Then you edit the three manifest files:
/**
* application-all.css
*
*= require_self
*= require_tree ./all
*/
/**
* application-print.css
*
*= require_self
*= require_tree ./print
*/
/**
* application-ie.css
*
*= require_self
*= require_tree ./ie
*/
Next you update your application layout file:
<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>
<!--[if lte IE 8]>
<%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->
Lastly, don't forget to include these new manifest files in your config/environments/production.rb:
config.assets.precompile += %w( application-all.css application-print.css application-ie.css )
Update:
As Max pointed out, if you follow this structure you have to be mindful of image references. You have a few choices:
- Move the images to follow the same pattern
- Note that this only works if the images are not all shared
- I expect this will be a non-starter for most since it complicates things too much
- Qualify the image path:
background: url('/assets/image.png');
- Use the SASS helper:
background: image-url('image.png');
Best Answer
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be
file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end -file.css.scss.erb- then erb is processed first, then scss.Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.