sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`

Question

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.

Answer 1

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?