A webpack loader that rewrites relative paths in url() statements based on the original source file.
TL;DR Making Sass work with a feature based project structure
With webpack you can import a .scss file (or some other compile-to-css file) and have a loader take care of the transpilation. With Sass (at least) this file can include a whole tree of source files into a single output.
We can imagine a virtual .css file at the location the original .scss import. Webpack expects any assets found in this CSS to be relative to the original imported file.
For projects with a feature based structure this will be a problem, since you will want to co-locate your assets with your .scss partials.
Example - webpack imports index.scss which includes feature foo.
| files | content |
|---|---|
| src / | |
| index.scss | @import features/foo |
| features / | |
| _foo.scss | url(bar.png) |
| bar.png |
Intuatively we want the assets in partial _foo.scss relative to the partial, meaning url(bar.png).
However webpack's css-loader will encounter url(bar.png) and expect to find src/bar.png. This is not the correct location and the build will fail.
Thankfully resolve-url-loader provides the "url rewriting" that Sass is missing. Use it after the transpiler (such as sass-loader). It makes use of the source-map to find the original source file and rewrite url() statements.
In our example it rewrites url(bar.png) to url(features/bar.png) as required.
See resolve-url-loader package.
See test-my-cli package for a functional programming framework for cli-testing. An unpublished work in progress.
See resolve-url-loader-filesearch package for the now defunct file search "magic" from resolve-url-loader@<3.0.0. This is currently unpublished. It needs to be adapted as a join function to be useful to anyone.