I have the following in my project:
// in app/stylesheets/foo.scss:
.foo {
// foo.png is at app/images/foo.png
background-image: image-url("foo.png");
}
// in vendor/stylesheets/bar.scss:
.bar {
// bar.png is at vendor/images/bar.png
background-image: image-url("bar.png");
}
If I try to compile both of those SCSS files, Compass will complain:
WARNING: 'foo.png' was not found (or cannot be read) in ./images WARNING: 'bar.png' was not found (or cannot be read) in ./images
The problem is that Compass assumes a single images_dir
. There are a few solutions to this:
- I set
images_dir
to.
and use the relative paths (e.g.image-url("app/images/foo.png")
in my stylesheets. That works great for my stylesheets, but it means I have to edit things invendor
to suit the structure of my application. Not nice. - I change Compass to support multiple
image_dirs
. This is certainly possible. I imagine they would work like load paths, so I could putimages_dirs = [ "app/images", "vendor/images" ]
and could thus override a vendor image with one of my own. - I change Compass to support per-compilation configuration. I could have project-wide defaults in the Compass configuration file. Then I would do something like
Compass.compile('vendor/stylehseets/bar.scss', :images_dir => 'vendor/images')
I'm equally happy with #2 and #3. I'd love to hear people's thoughts.
(NB: though this project is structured much like a Rails project, it's not Rails. Indeed, there's no Ruby server at all. It's a static site generator using rake-pipeline)
@chriseppstein suggested instead doing something like what sprockets-sass does. That is, monkey-patching the
Functions::Urls
methods to work with my environment. This is a proven method, but I believe the fact that that exists (and in several other repositories as well) shows that this is something that people would appreciate being able to do in Compass.