StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POsass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`
text
Body
copied!<p>In <a href="http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets" rel="noreferrer">section 2.2.2, "CSS and Sass"</a>, I'm told to put <code>image-url('delete.png')</code> in my sass. And so I have.</p> <p>However, it is generating CSS like</p> <pre><code>background-image: url(/images/delete.png) </code></pre> <p>instead of the thing that I'm told everywhere it should be generating, the correct and obvious thing,</p> <pre><code>background-image: url(/assets/delete.png) </code></pre> <p>What. The heck.</p> <p>I have spent literal days trying to figure out where this is coming from.</p> <p>Here's <a href="https://gist.github.com/2932450" rel="noreferrer">a gist of relevant settings</a> that are resulting in this behavior. Here's <a href="https://gist.github.com/2932478" rel="noreferrer">a gist of the same files in an earlier version of our code base</a> (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?</p> <h2>Note</h2> <ul> <li>We're purposely using an older version of <code>sass-rails</code> because a newer version was causing <code>Stack level too deep!</code> errors when precompiling.</li> <li>We're using Compass.</li> </ul> <hr> <h2>Two hackish attempts at workarounds</h2> <p>Because actually troubleshooting the asset pipeline kinda sucks.</p> <h3>1: Put images in /images</h3> <p>I attempted to just move all of the images to <code>public/images</code> and add that as a load path. This worked in dev (images are accessible at either <code>/assets</code> or <code>/images</code>), but precompiling for production puts the fingerprinted images in <code>/assets</code> only (obvs), so when sass-rails puts in <code>url(/imagse/delete-120398471029384102364.png)</code>, it can't be found.</p> <h3>2: Make /public/images a symlink to /public/assets</h3> <p>This would probably work in production, but in development the /assets folder doesn't exist, so the <code>url(/images/delete.png)</code> directives result in unfound images.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload