Relative URLs are funky

[tomhicks-bsf]

I'm not sure if this issue is a) not specifically to do with sass-loader, or b) already described in another issue, but hopefully this will at the very least enlighten me or others with the same issue. Apologies if it has been covered or I'm looking in the wrong place.

Given the following directory structure:

- fonts/
-- font-file.woff
- css/
-- app.css (build target)
- scss/
-- app.scss
-- partials/
---- _i-load-a-font.scss

app.scss:

@import "partials/i-load-a-font"

partials/i-load-a-font.scss:

@font-face{
  src: url("../fonts/font-file.woff")
}

If we build scss/app.scss to css/app.css, the font path is correct - that is how SASS expects the path to resolve - as it resolves it based on the final output CSS. If we use webpack with sass-loader, this breaks, because it tries to find the font-file.woff relative to partials/i-load-a-font.scss.

So I've inherited a project that is compiled with SASS that compiles properly with grunt or whatever they used, but as soon as I try to compile it with webpack it won't work. Is there a way to get this to work with webpack? It would seem odd to me that we would have to rewrite the SASS for this reason.

[tomhicks-bsf]

I have a feeling that this might be total nonsense...