cssnano-webpack-plugin


This plugin uses cssnano to optimize and minify your CSS.

Fully integrated in Webpack ecosystem: based on compiler hooks, respecting default Webpack output sources and compatible with other plugins like SourceMapDevToolPlugin or webpack-subresource-integrity.

Just like optimize-css-assets-webpack-plugin but more accurate with source maps and assets using query string.

Works with Webpack 4+.

Getting Started

First, install cssnano-webpack-plugin:

``console
$ npm install cssnano-webpack-plugin --save-dev
`

Then add the plugin to your webpack configuration. For example:

webpack.config.js

`js
const CssnanoPlugin = require('cssnano-webpack-plugin');

module.exports = {
module: {
loaders: [
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
optimization: {
minimizer: [
new CssnanoPlugin()
]
}
};
`

This will enable CSS optimization only in production mode. If you want to run it also in development, put the plugin configuration in the plugins option array.

Options

$3

Type: String|RegExp|Array - default: /\.css(\?.*)?$/i

Test to match files against.

`js
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
test: /\.foo\.css$/i
})
]
}
};
`

include and exclude options are also supported (see module rules).

$3

Type: Boolean|Object - default: false

Enable (and configure) source map support. Use PostCss SourceMap options. Default configuration when enabled: { inline: false }.

`js
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
sourceMap: true
})
]
}
};
`

$3

Type: Object - default: { preset: 'default' }

Cssnano optimisations options.

`js
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
cssnanoOptions: {
preset: ['default', {
discardComments: { removeAll: true }
}]
}
})
]
}
};
`

Examples

$3

Don't forget to enable sourceMap options for all loaders.

`js
const CssnanoPlugin = require('cssnano-webpack-plugin');

module.exports = {
module: {
loaders: [
{
test: /.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
}
]
},
optimization: {
minimizer: [
new CssnanoPlugin({
sourceMap: true
})
]
}
};
`

$3

Remove all comments (including comments starting with /*!).

`js
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
cssnanoOptions: {
preset: ['default', {
discardComments: { removeAll: true }
}]
}
})
]
}
};
``

License

MIT