SASS @import and maintaining URLs for images etc

Shouldn’t URLs be maintained when importing .scss files from other directories?

e.g.

File structure: css/

• main.scss
• dir/
• • dir.scss

main.scss:

@import './dir/dir.scss';

dir.scss:

body { background: url('../../arbitrary/bg.jpg'); }

Generated CSS (in css/)

body { background: url('../../arbitrary/bg.jpg'); }

Shouldn’t SASS see that the .scss file being imported is one directory above it and then move all directories up accordingly? So:

body { background: url('../arbritrary/bg.jpg'); }

CSS @import will ‘preserve’ proper URLs not because it changes them (I think), but because each @import is handled as a separate HTTP request to the CSS file being ‘imported’.

[vectorjohn]

The opposition to this seems misguided. import as implemented is wrong for relative paths. Everyone opposing this seems to be under the impression that any sass include file has to know its location relative to everywhere it gets included. This is completely broken. Compass URL Helpers aren’t the right solution, this should just work.

I can’t imagine how anybody is using url() in an included file. It breaks encapsulation. If my _cool-include.scss file depends on url(‘./foo.jpg’), where is it supposed to find foo.jpg? Anyone would reasonably expect it to be next to _cool-include.scss, exactly like a normal css import would act. File references should be relative to the css (or scss) file. Instead, it depends on what included _cool_include.scss, which is a pretty brittle way of doing things. Then if it’s included by thing1/root.scss AND thing2/root.scss, I guess whoopsie daisy?

[felixfbecker]

Please make this an option. I’m using NPM (same for Bower though) to install bootstrap-sass and font-awesome. I then @import them in my app.scss. Both have fonts referenced. I use gulp to build my app. If I run a url reworker after the sass compilation, I can’t get the original path because it’s now all in app.css. If I run it before the sass compilation, there are no references because the @imports have not been processed yet. There is no way for me to fix the paths if Sass doesn’t include an option for fixing relative urls, or at least providing some sort of hook.