css-url-relative-plugin

Webpack plugin to convert css url(...) to relative path (only support webpack >= 4).

This plugin aims to solve the problem that webpack generate incorrect relative path when your publicPath is empty (defaults to '') or './', it will replace incorrect path in css url(...)s with correct relative path at end of webpack compilation process.

For example:

/*
 * /project
 * |- dist
 * |  |- xxx.hash.png
 * |  |- page
 * |     |- index.hash.css
 * |- src
 *    |- img
 *    |  |- xxx.png
 *    |- page
 *       |- index.css
 */
/* page/index.css (original css code you write) */
body {
  background: url(../img/xxx.png)
}

/* page/index.hash.css (webpack generated) */
body {
  /*
   * css-url-relative-plugin will generate: url(../xxx.hash.png)
   */
  background: url(xxx.hash.png)
}

As you can see, the image path in url(...) is relative to output dir, not the css file.

Usage

const CssUrlRelativePlugin = require('css-url-relative-plugin')

module.exports = {
  ...
  plugins: [
    new CssUrlRelativePlugin(/* options */)
  ]
}

Notice

please notice that, this plugin doesn't support SourceMap, if you want this feature, please send me the pull request.

Options

root

Like root option in css-loader, it's the path to resolve URLs.

LICENSE

MIT