How to configure cssnano for CSS minification?

Question

I am trying to configure cssnano plugin for the postcss-loader, which minifies CSS, very similar, as described here.

Webpack config:

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                cssnano({
                  preset: ['default', {
                    discardComments: {
                      removeAll: true,
                    },
                    // how to find index of all available options?
                  }]
                })
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },

...

Here are listed all the optimisations from cssnano documentation

And here is an example of how to override a single optimisation discardComments on top of default preset.

Is it possible to override each optimisation configuration individually, like with discardComments? This could be very handy in creating a separate configurations for dev and production.

Also, in this repo is an unsuccessful attempt with minimal example and the boilerplate.

EDIT: cssnano devs told it is not possible to configure each optimisation individually, instead, it might be possible to use each optimisation plugin separately source

Answer 1

Using cssnano with postcss-loader and mini-css-extract-plugin is not the best option for minification in Webpack because the setup minifies individual source files instead of the whole emitted CSS file (it has excess white spaces). The best option is to use optimize-css-assets-webpack-plugin.

Install it:

npm install --save-dev optimize-css-assets-webpack-plugin

And use add it to you Webpack config:

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [] // Don't add cssnano here. Remove the loader completely if you have no plugins.
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        // cssnano configuration
        cssProcessorPluginOptions: {
          preset: ['default', {
            discardComments: {
              removeAll: true
            }
          }],
        },
      })
    ]
  }

...

The cssnano options index: https://cssnano.co/optimisations/

But if you use style-loader instead of mini-css-extract-plugin, you should use postcss-loader with cssnano because optimize-css-assets-webpack-plugin optimizes only the emitted CSS files.

Answer 2

You can view my full config here

Actually I use webpack shell plugin to run postcss command every time I build in dev mode

plugins: [
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],

So what it does is when the build done the postcss command will kick in to minify css file in wwwroot/dist

Answer 3

please find following steps to creat that
Minimize CSS files with cssnano
wpack.io uses postcss-loader and thereby PostCSS. So we can take advantage of it to minify our CSS/SASS files during production builds.

1
Install and use cssnano
npm i -D cssnano
or with 
yarn add --dev cssnano
2
Edit postcss.config.js file
/* eslint-disable global-require, import/no-extraneous-dependencies */
const postcssConfig = {
    plugins: [require('autoprefixer')],
};

// If we are in production mode, then add cssnano
if (process.env.NODE_ENV === 'production') {
    postcssConfig.plugins.push(
        require('cssnano')({
            // use the safe preset so that it doesn't
            // mutate or remove code from our css
            preset: 'default',
        })
    );
}

module.exports = postcssConfig;
Save it and you are good to go.