Resolve URL Loader
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
Example - webpack imports
index.scss which includes feature
Intuatively we want the assets in partial
_foo.scss relative to the partial, meaning
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.
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
In our example it rewrites
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.