I put together a new Rails application to try out the new version of Rails, and during the course of testing it I came across an odd problem..
My pages were unstyled.
Checking Chrome’s devtools, I noticed the CSS files were all 404ing. Chrome and Rails obviously knew what the files were supposed to be. But they just weren’t where they were supposed to be.
I set up my environment with the following gems (besides the defaults):
and the development/testing gems:
After encountering the error I checked my git status and it told me the files were being created in public/stylesheets - the old path, rather than the shiny new public/assets of the Rails 3.1 Asset Pipeline.
First thing I did was start googling the errors I was encountering. I wasn’t getting a satisfactory lead from that so I started looking at what could be interfering with the asset pipeline.
All signs pointed to Compass.
Compass was blindsided by the massive changes to Rails with the 3.1 update, and since its not the official release yet they haven’t 100% caught up yet.
There’s tons of articles, posts, and bugs to be found on it right now.
The first thing I tried was having bundler pull from Compass’s github:
gem 'compass', :git => 'https://github.com/chriseppstein/compass.git'
Unfortunately, that still didn’t fix the problem, but I decided to leave it in.
Then I started going through Compass’s documentation and found the configuration options.
Eureka!
I’d previously done:
css_dir = 'public/assets'
And now with:
sass_dir = 'app/assets/stylesheets'
It works!
Hopefully this bug will get fixed in Compass soon.