{"id":19434,"library":"cssnano-webpack-plugin","title":"cssnano-webpack-plugin","description":"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.","status":"deprecated","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/lneveu/cssnano-webpack-plugin","tags":["javascript","cssnano","css","webpack","webpack-plugin","minimize","minimizer","minify","minifier"],"install":[{"cmd":"npm install cssnano-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add cssnano-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add cssnano-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, required to function as a Webpack plugin","package":"webpack","optional":false}],"imports":[{"note":"Package does not export ESM; CommonJS only.","wrong":"import CssnanoPlugin from 'cssnano-webpack-plugin';","symbol":"CssnanoPlugin","correct":"const CssnanoPlugin = require('cssnano-webpack-plugin');"},{"note":"Package exports a single class via module.exports.","wrong":"const { CssnanoPlugin } = require('cssnano-webpack-plugin');","symbol":"default import","correct":"const CssnanoPlugin = require('cssnano-webpack-plugin');"},{"note":"Class name is CssnanoPlugin, not cssnanoWebpackPlugin or CssnanoWebpackPlugin.","wrong":"new cssnanoWebpackPlugin()","symbol":"Instance in config","correct":"new CssnanoPlugin()"}],"quickstart":{"code":"// webpack.config.js\nconst CssnanoPlugin = require('cssnano-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [MiniCssExtractPlugin.loader, 'css-loader']\n      }\n    ]\n  },\n  plugins: [new MiniCssExtractPlugin()],\n  optimization: {\n    minimizer: [\n      new CssnanoPlugin({\n        sourceMap: true,\n        cssnanoOptions: {\n          preset: ['default', { discardComments: { removeAll: true } }]\n        }\n      })\n    ]\n  }\n};","lang":"javascript","description":"Basic webpack config using cssnano-webpack-plugin to minify CSS extracted by MiniCssExtractPlugin, with source maps and custom cssnano preset."},"warnings":[{"fix":"Replace with css-minimizer-webpack-plugin: npm install --save-dev css-minimizer-webpack-plugin","message":"Package is deprecated; use css-minimizer-webpack-plugin instead.","severity":"deprecated","affected_versions":"*"},{"fix":"Add to optimization.minimizer, not plugins.","message":"Plugin must be added to optimization.minimizer, not plugins array, to work in production mode.","severity":"gotcha","affected_versions":"*"},{"fix":"Use optimization.minimizer for production-only minimization, or use mode flag in plugins.","message":"If added to plugins array, it runs in all modes including development, which may slow down builds.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to css-minimizer-webpack-plugin for Webpack 5/6 support.","message":"Does not support Webpack 5; designed for Webpack 4.","severity":"gotcha","affected_versions":"*"},{"fix":"Use require() instead of import.","message":"No ESM export; CommonJS require only.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use: const CssnanoPlugin = require('cssnano-webpack-plugin'); then new CssnanoPlugin()","cause":"Incorrect import: using default import from ESM syntax or destructuring require.","error":"TypeError: CssnanoPlugin is not a constructor"},{"fix":"Run: npm install cssnano-webpack-plugin --save-dev","cause":"Package not installed or version mismatch.","error":"Module not found: Error: Can't resolve 'cssnano-webpack-plugin'"},{"fix":"Adjust test option to match your CSS files, e.g., test: /\\.s?css$/i","cause":"File does not match the test regex; plugin only processes files that match its test option (default: /\\.css(\\?.*)?$/i).","error":"Error: No matching files found for test pattern /test.css$/i"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}