resolve-url-loader

by bholloway

Webpack loader that resolves relative paths in url() statements based on the original source file

458 Stars 64 Forks Last release: about 1 year ago (3.1.0) 230 Commits 33 Releases

Available items

No Items, yet!

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:

Resolve URL Loader

A webpack loader that rewrites relative paths in url() statements based on the original source file.

Why?

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 | |

Intuitively 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.

Getting started

See resolve-url-loader package.

Other stuff

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
join
function to be useful to anyone.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.