{"id":20272,"library":"postcss-loader","title":"postcss-loader","description":"Webpack loader that processes CSS with PostCSS. Current stable version is 8.2.1, released February 2026, requiring Node.js >=18.12.0 and webpack ^5.0.0. Supports automatic configuration file discovery (postcss.config.js, etc.) and ESM configs via jiti v2. Key differentiator: official webpack integration for PostCSS, handles source maps, CSS-in-JS via execute option, and supports Rspack as optional peer dependency.","status":"active","version":"8.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/postcss-loader","tags":["javascript","css","postcss","postcss-runner","webpack","webpack-loader"],"install":[{"cmd":"npm install postcss-loader","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for processing CSS","package":"postcss","optional":false},{"reason":"Peer dependency required for loader integration","package":"webpack","optional":false},{"reason":"Optional peer dependency for Rspack compatibility","package":"@rspack/core","optional":true}],"imports":[{"note":"postcss-loader is a webpack loader, not a JavaScript module. It is configured via webpack config, not imported directly.","wrong":"import postcssLoader from 'postcss-loader'","symbol":"postcss-loader","correct":"module.exports = { module: { rules: [ { test: /\\.css$/i, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] } }"}],"quickstart":{"code":"npm install --save-dev postcss-loader postcss webpack webpack-cli style-loader css-loader\n\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'postcss-loader',\n            options: {\n              postcssOptions: {\n                plugins: [\n                  ['postcss-preset-env', { /* options */ }]\n                ]\n              }\n            }\n          }\n        ]\n      }\n    ]\n  }\n};","lang":"javascript","description":"Install required dependencies and configure postcss-loader in webpack to process CSS with PostCSS plugins."},"warnings":[{"fix":"Upgrade Node.js to 18.12.0 or higher","message":"Node.js version >=18.12.0 required as of v8.0.0","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Upgrade webpack to v5 or downgrade postcss-loader to v4","message":"Webpack v5 required for v8.x; v4 users must use postcss-loader v4","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Ensure jiti v2 is compatible with your config; test ESM load","message":"jiti updated from v1 to v2 in v8.2.0, may break ESM config loading","severity":"breaking","affected_versions":">=8.2.0"},{"fix":"Use 'postcssOptions' field instead of 'config'","message":"Option 'config' is deprecated; use 'postcssOptions' with a config file or inline options","severity":"deprecated","affected_versions":">7.x"},{"fix":"Add execute: true and postcssOptions.parser: 'postcss-js' in loader options","message":"If using CSS-in-JS, you must set 'execute: true' and a PostCSS parser like postcss-js","severity":"gotcha","affected_versions":"*"},{"fix":"Enable sourceMap in css-loader options and set devtool in webpack config","message":"Source maps may conflict if 'css-loader' sourceMap is disabled","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":"Create a postcss.config.js file at project root or specify plugins via postcssOptions in webpack config","cause":"PostCSS configuration file (postcss.config.js) is missing or not found","error":"Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\nError: No PostCSS Config found"},{"fix":"Install postcss@8: npm install --save-dev postcss@8","cause":"Installed postcss version is 7 but plugin requires PostCSS 8","error":"Error: PostCSS plugin postcss-preset-env requires PostCSS 8."},{"fix":"Downgrade to postcss-loader@4 or upgrade webpack to v5","cause":"Using webpack v4 with postcss-loader v7+ (requires webpack v5)","error":"TypeError: loaderContext.getOptions is not a function"},{"fix":"Set mode in webpack config: module.exports = { mode: 'development', ... }","cause":"Webpack mode not explicitly set; postcss-loader uses mode for config resolution","error":"Error: The 'mode' option has not been set, webpack will fallback to 'production' for this value."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}