Rails 3.1 asset urls in SCSS files do not seem to be referencing the assets correctly

Question

I just upgraded from Rails 3.0 to Rails 3.1.

I have a foo.css.scss file that references an image (/app/assets/images/foo.png) as follows:

.foo {
  background-image: image-url('foo.png');
}

The problem is that my foo.png file is not loaded and I see 404 errors in my logs. The actual css entry that is generated is:

background-image: url(/images/foo.png);

which is wrong (?) because the image can be found at /assets/foo.png and not at /images/foo.png.

Note that I am still working on development mode.

Another important note. If I rename my foo.css.scss file to foo.css.erb and use:

background-image: url(<%= image_path('foo.png') %>);

it works ok, because it generates /assets/foo.png.

So, the question is why my scss precompiler does not generate the correct css?

Update: my foo.css.scss file resides:

app/assets/stylesheets/sub_dir/foo.css.scss

Does that make any difference?

Answer 1

You may try:

.foo {
  background: url("/assets/foo.png")
}

should work fine. Hope it helps :)

Answer 2

try

.classname{
  background: url(asset_path('/assets/image.png'))
}

Answer 3

I have tried various solutions. The most elegant one was the following:

.foo {
   background-image: url('foo.png')
}

which automatically converted to url('/assets/foo.png') by the SCSS compiler.

Answer 4

.foo {
  background-image: asset-url('sub_dir/foo.png', asset);
}