Commit 3d53968

|**[`root`](#root)**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|

|**[`alias`](#alias)**|`{Object}`|`{}`|Create aliases to import certain modules more easily|

|**[`minimize`](#minimize)**|`{Boolean\|Object}`|`false`|Enable/Disable minification|

For URLs that start with a `/`, the default behavior is to not translate them.

If a `root` query parameter is set, however, it will be prepended to the URL

and then translated.

**webpack.config.js**

{

loader: 'css-loader',

options: { root: '.' }

}

`url(/image.png)` => `require('./image.png')`

Using 'Root-relative' urls is not recommended. You should only use it for legacy CSS files.

Rewrite your urls with alias, this is useful when it's hard to change url paths of your input files, for example, when you're using some css / sass files in another package (bootstrap, ratchet, font-awesome, etc.).

`css-loader`'s `alias` follows the same syntax as webpack's `resolve.alias`, you can see the details at the [resolve docs](https://webpack.js.org/configuration/resolve/#resolve-alias)

**file.scss**

@charset "UTF-8";

@import "bootstrap";

**webpack.config.js**

{

test: /\.scss$/,

use: [

{

loader: "style-loader"

},

{

loader: "css-loader",

options: {

alias: {

"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"

}

}

},

{

loader: "sass-loader",

options: {

includePaths: [

path.resolve("./node_modules/bootstrap-sass/assets/stylesheets")

]

}

}

]

}

Check out this [working bootstrap example](https://github.com/bbtfr/webpack2-bootstrap-sass-sample).

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

In some cases the minification is destructive to the css, so you can provide your own options to the cssnano-based minifier if needed. See [cssnano's documentation](http://cssnano.co/guides/) for more information on the available options.

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

**webpack.config.js**

{

loader: 'css-loader',

options: {

minimize: true || {/* CSSNano Options */}

}

}

For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract the CSS when running in production mode.

**webpack.config.js**

const env = process.env.NODE_ENV

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: env === 'production'

? ExtractTextPlugin.extract({

fallback: 'style-loader',

use: [ 'css-loader' ]

})

: [ 'style-loader', 'css-loader' ]

},

]

},

plugins: env === 'production'

? [

new ExtractTextPlugin({

filename: '[name].css'

})

]

: []

}

var createResolver = require("./createResolver");

if(this.cacheable) this.cacheable();

var root = query.root;

var moduleMode = query.modules || query.module;

var camelCaseKeys = query.camelCase || query.camelcase;

var resolve = createResolver(query.alias);

resolve: resolve,

minimize: this.minimize,

if(!loaderUtils.isUrlRequest(imp.url, root)) {

var url = resolve(urlItem.url);

var createResolver = require("./createResolver");

if(this.cacheable) this.cacheable();

var moduleMode = query.modules || query.module;

var camelCaseKeys = query.camelCase || query.camelcase;

var resolve = createResolver(query.alias);

minimize: this.minimize,

resolve: resolve

var assign = require("object-assign");

if(loaderUtils.isUrlRequest(url, options.root)) {

url = loaderUtils.urlToRequest(url, options.root);

function isAlias(url) {

// Handle alias starting by / and root disabled

return url !== options.resolve(url)

}

if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || loaderUtils.isUrlRequest(item.url, options.root))) {

var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, "") : query.root;

var forceMinimize = query.minimize;

var minimize = typeof forceMinimize !== "undefined" ? !!forceMinimize : options.minimize;

root: root,

if(!url.replace(/\s/g, '').length || !loaderUtils.isUrlRequest(url, root)) {

return loaderUtils.urlToRequest(url, root);

if(minimize) {

var cssnano = require("cssnano");

var minimizeOptions = assign({}, query.minimize);

["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents", "autoprefixer"].forEach(function(name) {

if(typeof minimizeOptions[name] === "undefined")

minimizeOptions[name] = false;

});

pipeline.use(cssnano(minimizeOptions));

}