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+.
First, install cssnano-webpack-plugin:
$ npm install cssnano-webpack-plugin --save-devThen add the plugin to your webpack configuration. For example:
webpack.config.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.
Type: String|RegExp|Array<String|RegExp> - default: /\.css(\?.*)?$/i
Test to match files against.
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
test: /\.foo\.css$/i,
}),
],
},
};include and exclude options are also supported (see module rules).
Type: Boolean|Object - default: false
Enable (and configure) source map support. Use PostCss SourceMap options. Default configuration when enabled: { inline: false }.
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
sourceMap: true,
}),
],
},
};Type: Object - default: { preset: 'default' }
Cssnano optimisations options.
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
cssnanoOptions: {
preset: [
'default',
{
discardComments: { removeAll: true },
},
],
},
}),
],
},
};Don't forget to enable sourceMap options for all loaders.
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,
}),
],
},
};Remove all comments (including comments starting with /*!).
module.exports = {
optimization: {
minimizer: [
new CssnanoPlugin({
cssnanoOptions: {
preset: [
'default',
{
discardComments: { removeAll: true },
},
],
},
}),
],
},
};