shanear / resolve-url-loader

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

Resolve URL Loader

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

Use in conjunction with the sass-loader and specify your asset url() relative to the scss file in question. This loader 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.

In some use cases (no preceding transpiler) there will be no incoming source map. Therefore we do not warn if the source-map is missing.

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.

• silent Do not display warnings on CSS syntax error.

• fail Syntax errors will result in an error.

How it works

The incoming source-map is used to resolve the original file. This is necessary where there was some preceding transpile step such as SASS. A rework process is then run on incoming css.

Each url() statement that implies an asset triggers a file search using node fs operations. The search begins relative to the original file and usually the asset is found immediately. However in some cases there is no immediate match (cough bootstrap cough) and we so we start searching both deeper and shallower from the starting directory. The search will continue while within the project directory and until a package.json or bower.json file is encountered.

If the asset is not found then the url() statement will not be updated.