2

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?

p.matsinopoulos
  • 7,655
  • 6
  • 44
  • 92
  • Something more significant has gone wrong, but a simple fix would be to change image-url to asset-url – Yule Sep 03 '14 at 08:05
  • @Yule I used `asset-url('foo.png', image)` as per your suggestion, but I have the same error. The generaged url is `/images/foo.png` – p.matsinopoulos Sep 03 '14 at 08:21
  • what version of sass-rails are you using? and do you have `config.assets.enabled = true` `config.assets.version = '1.0'` in application.rb – Yule Sep 03 '14 at 08:33
  • @Yule sass-rails version: 3.1.0.. 'yes' for both version and enabled flag – p.matsinopoulos Sep 03 '14 at 08:53
  • You should only get /images/foo.png if it couldn't find foo.png. Could it be something silly like a uppercase/lowercase mismatch between what's in your css and the file path? – Frederick Cheung Sep 03 '14 at 09:12

4 Answers4

2

You may try:

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

should work fine. Hope it helps :)

Rajesh Omanakuttan
  • 6,788
  • 7
  • 47
  • 85
  • Hmmmm.This one works, indeed. Would that be working when I move to production? Also, according to documentation of sass-rails, the image-url method should be doing that automatically. And the question is why the image-url method does not work as expected. I wrote on my answer that `image-url` does not work. – p.matsinopoulos Sep 03 '14 at 08:55
  • yes, definitely. It will be compiled and a fingerprinted file will be generated for the same image. You can find it inside 'public' directory – Rajesh Omanakuttan Sep 03 '14 at 08:56
  • Will keep your answer as useful for the time being, but you have to remove the `image-url` version because as I have told in my question does not work. I need to understand, though, why the `image-url` does not work before going to use `url` with `/assets/` prefix. – p.matsinopoulos Sep 03 '14 at 09:00
  • 1
    This link may help you out- http://stackoverflow.com/questions/16843143/rails-4-image-path-image-url-and-asset-url-no-longer-work-in-scss-files – Rajesh Omanakuttan Sep 03 '14 at 09:05
  • This is incorrect as it will break in production. I think it does work with Rails 3.1 but will definitely break with Rails 4.0 – Andrius Chamentauskas Sep 03 '14 at 22:27
  • @AndriusChamentauskas: The question is regarding Rails 3.1 and as such the answer is correct. – Rajesh Omanakuttan Sep 04 '14 at 04:01
  • I don't think you can consider workaround a correct solution. It's not Rails recommended way (in fact I remember reading in rails guides that this is actually the "not recommended way"). And it will break in future rails versions. What's worse is that it will break in production only, so most likely it won't be noticed until app is deployed... – Andrius Chamentauskas Sep 04 '14 at 07:56
  • @Andrius Chamentauskas: I said for the Rails version mentioned(3.1), it will work fine. No issues will be there in production also, the precompilation will be carried out successfully. The question's owner have already tried it in Rails way. Since he was not able to make it, I suggested him another solution for achieving it. I'm damn sure that it will not break in production if he is using Rails 3.1 - Rails 3.2.16. I was not supposed to suggest a solution for Rails 4.0. – Rajesh Omanakuttan Sep 04 '14 at 08:33
  • My point is that instead of solving a problem you introduced a workaround, I wouldn't consider this a solution especially if it will introduce problems in the future. – Andrius Chamentauskas Sep 05 '14 at 11:08
  • Hello, I implemented this solution and since I am using Rails 5, I receive the following warning message in my log file: DEPRECATION WARNING: Extra .css in SCSS/ERB file is unnecessary. Could we find a solution? Thanks – Fabrizio Bertoglio Feb 13 '17 at 14:50
  • How did you call this CSS file? – Rajesh Omanakuttan Feb 13 '17 at 15:47
0

try 

.classname{
  background: url(asset_path('/assets/image.png'))
}
jbmyid
  • 1,985
  • 19
  • 22
0

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.

p.matsinopoulos
  • 7,655
  • 6
  • 44
  • 92
0
.foo {
  background-image: asset-url('sub_dir/foo.png', asset);
}
Mohamed Ziata
  • 1,186
  • 1
  • 11
  • 21