{"id":19406,"library":"clean-css-loader","title":"clean-css-loader","description":"A webpack loader that minifies CSS using CleanCSS. Current stable version is 4.2.1 (released February 2023), with maintenance-level updates. It supports webpack 2+ and works with schema-utils v3/v4, loader-utils v1-v3. Key differentiators: minimal configuration, supports CleanCSS level 2 optimizations, source maps, and inline import options. Competing loaders like css-minimizer-webpack-plugin are more modern but this loader is simpler for basic minification. Ships TypeScript types.","status":"active","version":"4.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/retyui/clean-css-loader","tags":["javascript","CleanCSS","webpack","loader","typescript"],"install":[{"cmd":"npm install clean-css-loader","lang":"bash","label":"npm"},{"cmd":"yarn add clean-css-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add clean-css-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for options validation","package":"schema-utils","optional":false},{"reason":"Peer dependency for loader option parsing, version must match webpack major","package":"loader-utils","optional":false},{"reason":"Peer dependency; requires webpack >=2.0.0","package":"webpack","optional":false}],"imports":[{"note":"This is a webpack loader, not a module to import in code. Use it in webpack config as a string or object.","wrong":"import cleanCssLoader from 'clean-css-loader'","symbol":"default","correct":"module.exports = { loader: 'clean-css-loader', options: { ... } }"},{"note":"Inline import must chain with style-loader and css-loader; omitting them will not produce CSS in the bundle.","wrong":"import 'clean-css-loader!./style.css'","symbol":"inline import","correct":"import 'style-loader!css-loader!clean-css-loader!./style.css'"},{"note":"Use options object instead of query string (e.g. `?level=2`) because webpack 5 parses query strings differently; strings like 'true' are not coerced to boolean.","wrong":"use: ['style-loader', 'css-loader', { loader: 'clean-css-loader?level=2' }]","symbol":"webpack rules","correct":"use: ['style-loader', 'css-loader', 'clean-css-loader']"}],"quickstart":{"code":"// webpack.config.js\nconst isProduction = process.env.NODE_ENV === 'production';\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'clean-css-loader',\n            options: {\n              disable: !isProduction,\n              skipWarn: false,\n              sourceMap: true,\n              level: 2,\n              compatibility: 'ie9',\n            },\n          },\n        ],\n      },\n    ],\n  },\n};","lang":"javascript","description":"Shows webpack config with clean-css-loader, including conditional disable for dev and CleanCSS level 2 optimization."},"warnings":[{"fix":"Use an options object in webpack config instead of inline query strings.","message":"webpack 5 changes how query string options are parsed: `?skipWarn=true` becomes string 'true' instead of boolean true","severity":"breaking","affected_versions":">=4.2.1"},{"fix":"Upgrade to Node.js >=14.","message":"Node.js 12 support dropped in v4.2.0","severity":"deprecated","affected_versions":">=4.2.0 <4.2.0"},{"fix":"Use options object or upgrade loader-utils to v3 and pass primitive values correctly.","message":"Loader-utils v3 changed option parsing; boolean values in query strings are not coerced","severity":"gotcha","affected_versions":">=4.2.0"},{"fix":"Remove clean-css-loader if using css-minimizer-webpack-plugin, or configure plugin to use clean-css instead.","message":"When using with css-minimizer-webpack-plugin, do not use clean-css-loader in minimization step; use one or the other","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":"Do not import 'clean-css-loader' in application JS; only reference it as a string or object in webpack config.","cause":"Using import statement on the loader directly in application code instead of webpack config","error":"Error: CleanCSSLoader is not a constructor"},{"fix":"Run 'npm install --save-dev clean-css-loader' and ensure node_modules is accessible.","cause":"Package not installed or webpack config missing resolveLoader","error":"Module not found: Error: Can't resolve 'clean-css-loader' in /path"},{"fix":"Upgrade webpack to >=5 and loader-utils to >=3, or downgrade clean-css-loader to 4.1.x.","cause":"Using an incompatible version of webpack or loader-utils","error":"TypeError: this.getOptions is not a function","affected_versions":">=4.2.1"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}