resolve-url-loader

What is resolve-url-loader?

The resolve-url-loader package is a webpack loader that resolves relative paths in url() statements based on the original source file. This is particularly useful when dealing with source maps and pre-processors like Sass, as it allows assets referenced in CSS to be correctly found and bundled by webpack.

What are resolve-url-loader's main functionalities?

Resolving relative URLs

This feature allows resolve-url-loader to adjust relative paths in url() statements so that they point to the correct location in a webpack build. The code sample shows how to include resolve-url-loader in a webpack configuration.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'resolve-url-loader'
        ]
      }
    ]
  }
};

Source map support

resolve-url-loader can handle source maps, which is essential for debugging processed stylesheets like those written in Sass. The code sample demonstrates how to enable source map support in webpack loaders, including resolve-url-loader.

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'resolve-url-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  }
};

Other packages similar to resolve-url-loader

file-loader

file-loader resolves import/require() on a file into a url and emits the file into the output directory. It's similar to resolve-url-loader in that it helps with asset management, but it doesn't resolve relative URLs based on the original source file.

url-loader

url-loader works like file-loader but can return a DataURL if the file is smaller than a byte limit. It's similar to resolve-url-loader as it deals with URLs in CSS and other files, but it doesn't specifically address the resolution of relative paths.

README

Resolve URL Loader

Webpack loader that rsesolves an absolute path of url() statements based on the original file.

Use in conjunction with the sass-loader and specify your assets relative to the sass file in question. This plugin will use the source-map from the sass compiler to locate the original file and write a more complete path for your asset. Subsequent build steps can then locate your asset for processing.

Usage

Plain CSS works fine:

var css = require('!css!resolve-url!./file.css');

Or using sass-loader:

var css = require('!css!resolve-url!sass?sourceMap!./file.scss');

Use in tandem with the style-loader to compile sass and to add the css rules to your document:

require('!style!css!resolve-url!./file.css');

and

require('!style!css!resolve-url!sass?sourceMap!./file.scss');

Source maps required

Note that source maps must be enabled on any preceding loader. In the above example we use sass?sourceMap.

Apply via webpack config

It is preferable to adjust your webpack.config so to avoid having to prefix every require() statement:

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.css$/,
        loaders: ['style', 'css', 'resolve-url']
      }, {
        test   : /\.scss$/,
        loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
      }
    ]
  }
};

Options

• absolute Forces the url() to be resolved to an absolute path. This is considered bad practice so only do it if you know what you are doing.

• sourceMap Generate a source-map.