sass-rails helpers "image-url", "asset-url" are not working in rails 3.2.1

Question

I am on 3.2.1, with sass-rails-3.2.4 and sass-3.1.15...

The documentation for the asset pipeline says:

asset-url("rails.png", image) becomes url(/assets/rails.png) image-url("rails.png") becomes url(/assets/rails.png) 

...

So I made the following file:

# app/assets/stylesheets/public/omg.css.sass  body   background: asset-url('snake.gif', image)  #lol   background: image-url('snake.gif') 

and when I visit localhost:3000/assets/public/omg.css I get:

body {   background: asset-url("snake.gif", image); }  #lol {   background: image-url("snake.gif"); } 

... I also tried changing the file to omg.css.scss and changed the syntax to:

# app/assets/stylesheets/public/omg.css.scss  body {   background: asset-url('snake.gif', image); }  #lol {   background: image-url('snake.gif'); } 

but get the same results... does anyone have any idea why these helpers are not working?

Answer 1

Despite what the documentation says, it seems the default options in rails 3.2.6 allow you to just make things work with even less path information in your CSS. E.g. ../app/assets/images/rails.png is references in your example.css.scss file with something like:

background: white url(rails.png) repeat-y;

You don't include the image-url or asset-url into your scss (as far as I know), just plain url(your_image.png). That bit of documentation appears to be just an explanation of what it is doing in the background.

Answer 2

When I hit this problem, it was because I had not included the css file in the asset pipeline for pre-compilation. As a result, it would be generated at runtime. Because the sass-rails gem is commonly in the :assets group, the helpers are unavailable when generating css files at runtime.

Try adding the following line to your application.rb (or production.rb):

config.assets.precompile += %w( public/omg.css ) 

I found the fix on this post including a gotcha around naming the files when adding them to the precompiler.