npm install css-loader

Documentation: Using loaders

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

@import and url(...) are interpreted like require() and will be resolved by the css-loader. Good loaders for requiring your assets are the file-loader and the url-loader which you should specify in your config (see below).

To be combatible to existing css files:

• url(image.png) => require("./image.png")
• url(~module/image.png) => require("module/image.png")

This webpack config can load css files, embed small png images as Data Urls and jpg images as files.

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" },
      { test: /\.jpg$/, loader: "file-loader" }
    ]
  }
};

For urls that start with a /, the default behavior is to not translate them:

• url(/image.png) => url(/image.png)

If a root query parameter is set, however, it will be prepended to the url and then translated:

With a config like:

    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?root=." },
      ...
    ]

The result is:

• url(/image.png) => require("./image.png")

By default the css-loader minimizes the css if specified by the module system.

In some cases the structural minification is destructive to the css, so you can disable it with the disableStructuralMinification query parameter. require("css-loader?disableStructuralMinification!./file.css")

You can also disable or enforce minification with the minimize query parameter.

require("css-loader?minimize!./file.css") (enforced)

require("css-loader?-minimize!./file.css") (disabled)

MIT (http://www.opensource.org/licenses/mit-license.php)