Webpack loader that resolves relative paths in url() statements based on the original source file
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
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
.scssfile (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
.cssfile at the location the original
.scssimport. 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.scsswhich includes feature
| files | content | |------------------------------------|------------------------| |src / | | | index.scss |
@import features/foo| | features / | | | _foo.scss |
url(bar.png)| | bar.png | |
Intuitively we want the assets in partial
_foo.scssrelative to the partial, meaning
url(bar.png)and expect to find
src/bar.png. This is not the correct location and the build will fail.
resolve-url-loaderprovides 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
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
[email protected]<3.0.0. This is currently unpublished. It needs to be adapted as a
joinfunction to be useful to anyone.