resolve-url-loader 5.0.0

The resolve-url-loader is a Webpack loader that rewrites relative paths in url() statements based on the original source file. This becomes particularly useful in situations where your configuration involves compile-to-css files (like SCSS) that can include a whole tree of source files into a single output. By making use of source map, resolve-url-loader correctly maps url() statements to their correlated assets even within a feature based structure. For example, if you have an image bar.png that resides in a feature directory, and it is referenced in _foo.scss as url(bar.png), the resolve-url-loader rewrites the url as url(features/bar.png) ensuring it correctly points to the asset.

The use of resolve-url-loader involves installing the package via npm or yarn, and then configuring it within your Webpack configuration. Here's an example:

First, you install the loader:

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

or

yarn add resolve-url-loader --dev

Then, within your webpack.config.js you specify resolve-url-loader between sass-loader and css-loader:

rules: [
  {
    test: /\.scss$/,
    use: [
      ...
      {
        loader: 'css-loader',
        options: {...}
      }, {
        loader: 'resolve-url-loader',
        options: {...}
      }, {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
          sourceMapContents: false
        }
      }
    ]
  },
  ...
]

Note that it's important to use full loader package name and not to omit -loader in the loader names.

The resolve-url-loader docs are provided in the README file on the package's GitHub page at https://github.com/bholloway/resolve-url-loader. The documentation covers the problem that resolve-url-loader addresses, its usage, options, limitations, and how to get help in case of issues.