cssnano-webpack-plugin

1.0.3 verified Sat Apr 25 auth: no javascript deprecated

Cssnano Webpack plugin for optimizing and minifying CSS. Current stable version is 1.0.3 (note: this is a legacy package; the official successor is css-minimizer-webpack-plugin). It integrates cssnano into the Webpack build pipeline, supporting source maps, custom cssnano presets, and selective file matching via test/include/exclude. Key differentiator: lightweight and simple, but no longer actively maintained. Works with Webpack 4+. Release cadence: no recent releases; last release was 2019-07-02.

Common errors

error TypeError: CssnanoPlugin is not a constructor ↓

cause Incorrect import: using default import from ESM syntax or destructuring require.

fix

Use: const CssnanoPlugin = require('cssnano-webpack-plugin'); then new CssnanoPlugin()

error Module not found: Error: Can't resolve 'cssnano-webpack-plugin' ↓

cause Package not installed or version mismatch.

fix

Run: npm install cssnano-webpack-plugin --save-dev

error Error: No matching files found for test pattern /test.css$/i ↓

cause File does not match the test regex; plugin only processes files that match its test option (default: /\.css(\?.*)?$/i).

fix

Adjust test option to match your CSS files, e.g., test: /\.s?css$/i

Warnings

deprecated Package is deprecated; use css-minimizer-webpack-plugin instead. ↓

fix Replace with css-minimizer-webpack-plugin: npm install --save-dev css-minimizer-webpack-plugin

gotcha Plugin must be added to optimization.minimizer, not plugins array, to work in production mode. ↓

fix Add to optimization.minimizer, not plugins.

gotcha If added to plugins array, it runs in all modes including development, which may slow down builds. ↓

fix Use optimization.minimizer for production-only minimization, or use mode flag in plugins.

gotcha Does not support Webpack 5; designed for Webpack 4. ↓

fix Upgrade to css-minimizer-webpack-plugin for Webpack 5/6 support.

gotcha No ESM export; CommonJS require only. ↓

fix Use require() instead of import.

Install

npm install cssnano-webpack-plugin

yarn add cssnano-webpack-plugin

pnpm add cssnano-webpack-plugin

Imports

CssnanoPlugin

wrong

import CssnanoPlugin from 'cssnano-webpack-plugin';

correct

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

Package does not export ESM; CommonJS only.

default import

wrong

const { CssnanoPlugin } = require('cssnano-webpack-plugin');

correct

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

Package exports a single class via module.exports.

Instance in config
wrong
```
new cssnanoWebpackPlugin()
```
correct
```
new CssnanoPlugin()
```
Class name is CssnanoPlugin, not cssnanoWebpackPlugin or CssnanoWebpackPlugin.

Quickstart

Basic webpack config using cssnano-webpack-plugin to minify CSS extracted by MiniCssExtractPlugin, with source maps and custom cssnano preset.

// webpack.config.js
const CssnanoPlugin = require('cssnano-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [new MiniCssExtractPlugin()],
  optimization: {
    minimizer: [
      new CssnanoPlugin({
        sourceMap: true,
        cssnanoOptions: {
          preset: ['default', { discardComments: { removeAll: true } }]
        }
      })
    ]
  }
};