18

In section 2.2.2, "CSS and Sass", I'm told to put image-url('delete.png') in my sass. And so I have.

However, it is generating CSS like

background-image: url(/images/delete.png)

instead of the thing that I'm told everywhere it should be generating, the correct and obvious thing,

background-image: url(/assets/delete.png)

What. The heck.

I have spent literal days trying to figure out where this is coming from.

Here's a gist of relevant settings that are resulting in this behavior. Here's a gist of the same files in an earlier version of our code base (right after we implemented the asset pipeline and it actually worked for about a week before this frustrating behavior popped up). Can you spot the differences? Any other files you can think of that might be causing this?

Note

  • We're purposely using an older version of sass-rails because a newer version was causing Stack level too deep! errors when precompiling.
  • We're using Compass.

Two hackish attempts at workarounds

Because actually troubleshooting the asset pipeline kinda sucks.

1: Put images in /images

I attempted to just move all of the images to public/images and add that as a load path. This worked in dev (images are accessible at either /assets or /images), but precompiling for production puts the fingerprinted images in /assets only (obvs), so when sass-rails puts in url(/imagse/delete-120398471029384102364.png), it can't be found.

2: Make /public/images a symlink to /public/assets

This would probably work in production, but in development the /assets folder doesn't exist, so the url(/images/delete.png) directives result in unfound images.

chadoh
  • 4,343
  • 6
  • 39
  • 64
  • Have you tried the following: `asset_path 'delete.png'` ? – ccyrille Jun 14 '12 at 21:13
  • It would be `asset-url('delete.png', image)`. Yes, I tried that. As one would hope, `image-url('delete.png')` is just shorthand for that. They have the exact same behavior. – chadoh Jun 14 '12 at 21:32
  • What about using .sass.erb file and use <%= asset_path('delete.png') %>? While it's still workaround-ish it may worth a try to diagnose if sass-rails is faulty or not. – Chris Jun 20 '12 at 21:34

8 Answers8

10

If you do not have this already, name your css file *.css.scss (as opposed to .sass - if you do this, you might need to adjust the syntax of some statements). Then use the image_path helper instead of image-path, e.g.:

background-image:url(image_path('delete.png'));

I expect this to solve your issue. If it does not, what is the asset path generated by this approach for you?

emrass
  • 6,253
  • 3
  • 35
  • 57
  • This doesn't work (unless I'm not taking an appropriate step, which is a possibility; I make the change then `rake tmp:cache:clear && rm -r .sass-cache/*` and then cmd+shift-R the page in Chrome so all of the assets return with status 200 instead of 202 Unmodified—should that work?). It gives the same results I had before (with "/images" being returned instead of "/assets"). I didn't even see this syntax in any docs, though. Why not `image-url`? – chadoh Jul 10 '12 at 20:13
8

This looks to be due to your version of sass-rails (3.1.0). I can reproduce your problem (thanks for posting the Gemfile) and it goes away when bumping to sass-rails 3.1.4.

Try upgrading to 3.1.4 and clearing tmp/cache. Also make sure you're not hitting any browser caches.

I know you said 3.1.4 was causing other problems... have you tried higher versions?

avaynshtok
  • 2,519
  • 1
  • 16
  • 14
  • 1
    This worked the first time I tried it, hence my upvote that caused you to get half my original bounty. However, it seemed like I did something else because going back to the original 3.1.0 version kept working. I retried today (a couple weeks later) and sass-rails 3.1.4 no longer works. Upgrading both Rails and sass-rails to 3.1.6 also fails. I may try upgrading to 3.2, but that's a lot of work. – chadoh Jul 10 '12 at 20:57
  • 1
    Are you clearing caches (specifically browser and RAILS_ROOT/tmp/cache) between tests? – avaynshtok Jul 11 '12 at 00:24
  • After every code change, I would `rake tmp:cache:clear && rm -r .sass-cache/*` and then cmd+shift-R in Chrome (which doesn't rely on cache). – chadoh Jul 11 '12 at 19:16
  • I updated to sass-rails 3.1.4 and cleared by `tmp/cache` and .sass-cache. `image-path` and `url-path` were both erroneously linking to /images instead of /assets. I tested out assets:precompile in my dev environment and despite still loading separate files (uncompressed), the path changed to the proper /assets. I then pushed to staging and everything worked great. Then after running `rake assets:clean` in development to get back to a proper dev env, the resulting css still links to /assets. I have no clue why that worked. – Archonic Jul 17 '13 at 17:15
2

It really looks like this issue: https://github.com/rails/sass-rails/issues/57 If so you should try to find the good combination of versions between Compass and Sass-rails.

And maybe upgrade everything (Rails included) to latest versions, it's still the best way to do (use bundle outdated command in bundler 1.2 to know what Gems to upgrade)

Chris
  • 2,744
  • 3
  • 24
  • 39
  • 2
    "Try to find the good combination of versions between Compass and Sass-rails". Awesome. I love solutions like this. "Put in two random versions, `bundle update`, `rake tmp:cache:clear`, and shift-refresh the browser." This is what I was doing before I asked on SO. It sucks. – chadoh Jul 10 '12 at 20:01
  • Thanks for the link to the bug, though. It looks like it's still afflicting a lot of people, though (lots of comments after the Close saying it's still happening). – chadoh Jul 10 '12 at 20:14
2

This is our combo of haml-rails, compass and sass-rails. We're running rails 3.2.6 though. This has worked well for us.

gem 'compass', git: 'git://github.com/chriseppstein/compass.git', ref: '3a4c5c75dca9f07f6edf2f0898a4626269e0ed62'

gem 'haml-rails', git: 'git://github.com/indirect/haml-rails.git', ref: '92c41db61f20a9f122de25bc73e5045cfccdbcd5'

gem 'sass-rails', '~> 3.2.5'

Webjedi
  • 4,677
  • 7
  • 42
  • 59
0

Not necessarily a solution, but certainly an available option: If you're open to using compass spriting, you'll cut down on the number of http requests and be able to manually specify your image path with a sprite map, ie '$sprites: sprite-map("PATH/*.png");'

RhinoWalrus
  • 3,009
  • 2
  • 32
  • 41
  • Interesting thought; it seems that Compass would still (via sass) create a "/images" directive for this, rather than the correct "/assets", though. – chadoh Jul 10 '12 at 20:52
  • Ah, you are correct. I forgot to include the necessary relative path flag in the asset file in my description. c.relative_assets = true – RhinoWalrus Jul 10 '12 at 20:55
0

Sanity check the file in your current asset pipepline. Check that it's in one of the directories listed in here:

<%= debug Rails.application.config.assets.paths %>

Next check at what relative path compass expects to find the image ( and see if it mat. According to the Compass config docs, one of these should tell you:

<%= debug config.compass.http_images_path %>
<%= debug config.compass.http_generated_images_path %>

I'm guessing it's the first one. Either way, compare their path to your image's asset_path:

<%= debug asset_path 'delete.png' %>

If the paths don't match, maybe you need to adjust the path in your environment configs (development.rb, ...) to this for example:

config.compass.http_images_path = '/assets.

Alternatively, you could move the image to where http_images_path or the http_generated_images_path expect to find it.

At the point, asset_path/asset_url (which are much less brittle than hardcoding) should hopefully work. I based this off of a similar technique I saw for stylesheets,

yuvilio
  • 3,795
  • 32
  • 35
  • Thanks! That all looks good, though. The `asset_path` and `image_path` helpers work in erb/haml. It's the `(asset|image)-(path|url)` helpers in sass that aren't working. – chadoh Jul 10 '12 at 20:45
0

For me,

Changing image_path to image-path worked for .scss. Later on, I changed to image_path again and it's working fine now.

Deleting cache didnt help me.

Jashwant
  • 28,410
  • 16
  • 70
  • 105
-2

After I edited my .scss file (added a space) and reload the page I got right result. After I removed the space it worked correctly.

Ivan
  • 3,187
  • 1
  • 19
  • 16