After spending much time looking into the various solutions for serving vendored CSS containing relative urls (with much help from Bibliographic Wilderness, I decided on using the sprockets-urlrewriter preprocessor.

After some adjustments to the regex used to identify and rewrite the CSS urls, there was one other issue.

Although the sprockets-urlrewriter claims to rewrite relative urls to absolute ones, what it really does is rewrites urls relative to itself, to urls relative to the root asset directory.

This means that if the CSS all being compiled into application.css, everything works great. However if in development you are debugging your assets (a default in Rails), each CSS is linked individually. This means that the newly re-written urls are relative to application.css, but referenced in a different css file.

This is still ok if the location of the CSS files you are rewriting the urls for are located in a root asset path, but if they are nested, your new urls dont work anymore.

For example...

/vendor
--/assets
----/stylesheets
------/folder_one
--------/css
----------default.css
.{ background: url(../img/image.png); }
--------/img
----------image.png

So withOUT the urlrewriter, in development we will get this...

/assets/folder_one/default.css
.{ background: url(../img/image.png); }

works great!

in production... not so much...

/assets/application.css
.{ background: url(../img/image.png); }

This is exactly what the urlrewriter is for! Now productions works.

/assets/application.css
.{ background: url(folderone/img/image.png); }
/assets/folderone/image.png

since the new url is relative to /assets, the image path is fine. but now in development...

/assets/folderone/default.css
.{ background: url(folderone/img/image.png);...