CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3.1sassasset-pipeline
p.matsinopoulos
p.matsinopoulos

Reputation: 7810

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

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?

Upvotes: 2

Views: 241

Answers (4)

Mohamed Ziata
Mohamed Ziata

Reputation: 1226

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

Upvotes: 0

p.matsinopoulos
p.matsinopoulos

Reputation: 7810

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.

Upvotes: 0

jbmyid
jbmyid

Reputation: 2015

try 

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

Upvotes: 0

Rajesh Omanakuttan
Rajesh Omanakuttan

Reputation: 6918

You may try:

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

should work fine. Hope it helps :)

Upvotes: 2

Related Questions