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

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

bholloway

resolve-url-loader

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

    "url": "git+https://github.com/bholloway/resolve-url-loader.git"

    "url": "git+https://github.com/bholloway/resolve-url-loader.git",

    "directory": "packages/resolve-url-loader"

    "url": "https://github.com/bholloway/resolve-url-loader/issues"

  "homepage": "https://github.com/bholloway/resolve-url-loader",

  "homepage": "https://github.com/bholloway/resolve-url-loader/tree/v3-maintenance/packages/resolve-url-loader",

    "lint": "jshint --exclude **/node_modules index.js lib"

> Version 4 release is imminent. Please try it. More info on the [homepage](https://github.com/bholloway/resolve-url-loader).

[![NPM](https://nodei.co/npm/resolve-url-loader.png)](https://www.npmjs.com/package/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 `.scss` partials.

**Example** - webpack imports `index.scss` which includes feature `foo`.

| files                              | content                |

|------------------------------------|------------------------|

|src /                               |                        |

|&nbsp;&nbsp;index.scss              | `@import features/foo` |

|&nbsp;&nbsp;features /              |                        |

|&nbsp;&nbsp;&nbsp;&nbsp;_foo.scss   | `url(bar.png)`         |

|&nbsp;&nbsp;&nbsp;&nbsp;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](https://www.npmjs.com/package/sass-loader)). It makes use of the [source-map](http://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html) 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.

* Use `postcss` parser by default. This is long overdue as the old `rework` parser doesn't cope with modern css.

* Lots of automated tests running actual webpack builds. If you have an interesting use-case let me know.

* Multiple options changed or deprecated.

* Removed file search "magic" in favour of `join` option.

* Errors always fail and are no longer swallowed.

* Processing absolute asset paths requires `root` option to be set.

Initially set option `engine: 'rework'` for parity with your existing build. Once working you can remove this option **or** set `engine: 'postcss'` explicitly.

Retain `keepQuery` option if you are already using it.

The `root` option now has a different meaning. Previously it limited file search. Now it is the base path for absolute or root-relative URIs, consistent with `css-loader`. If you are already using it you can probably remove it.

If you build on Windows platform **and** your content contains absolute asset paths, then `css-loader` could fail. The `root` option here may fix the URIs before they get to `css-loader`. Try to leave it unspecified, otherwise (windows only) set to empty string `root: ''`.

npm install resolve-url-loader --save-dev

The typical use case is `resolve-url-loader` between `sass-loader` and `css-loader`.

* **source-maps required** for loaders preceding `resolve-url-loader` (regardless of `devtool`).

* Always use **full loader package name** (don't omit `-loader`) otherwise you can get errors that are hard to debug.

		{
		"name": "resolve-url-loader",
		"version": "3.1.2",
		"version": "3.1.3",
		"description": "Webpack loader that resolves relative paths in url() statements based on the original source file",
		@@ -8,3 +8,4 @@ "main": "index.js",
		"type": "git",
		"url": "git+https://github.com/bholloway/resolve-url-loader.git"
		"url": "git+https://github.com/bholloway/resolve-url-loader.git",
		"directory": "packages/resolve-url-loader"
		},
		@@ -28,3 +29,3 @@ "keywords": [
		},
		"homepage": "https://github.com/bholloway/resolve-url-loader",
		"homepage": "https://github.com/bholloway/resolve-url-loader/tree/v3-maintenance/packages/resolve-url-loader",
		"engines": {
		@@ -31,0 +32,0 @@ "node": ">=6.0.0"

		@@ -0,1 +1,7 @@
		> I M P O R T A N T
		>
		> Version 4 release is imminent. Please try it. More info on the [homepage](https://github.com/bholloway/resolve-url-loader).
		>
		> Version 3 is now in maintenance mode.

		# Resolve URL Loader
		@@ -2,0 +8,0 @@

Improved metrics