postcss-loader

8.2.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: No PostCSS Config found ↓

cause PostCSS configuration file (postcss.config.js) is missing or not found

fix

Create a postcss.config.js file at project root or specify plugins via postcssOptions in webpack config

error Error: PostCSS plugin postcss-preset-env requires PostCSS 8. ↓

cause Installed postcss version is 7 but plugin requires PostCSS 8

fix

Install postcss@8: npm install --save-dev postcss@8

error TypeError: loaderContext.getOptions is not a function ↓

cause Using webpack v4 with postcss-loader v7+ (requires webpack v5)

fix

Downgrade to postcss-loader@4 or upgrade webpack to v5

error Error: The 'mode' option has not been set, webpack will fallback to 'production' for this value. ↓

cause Webpack mode not explicitly set; postcss-loader uses mode for config resolution

fix

Set mode in webpack config: module.exports = { mode: 'development', ... }

Warnings

breaking Node.js version >=18.12.0 required as of v8.0.0 ↓

fix Upgrade Node.js to 18.12.0 or higher

breaking Webpack v5 required for v8.x; v4 users must use postcss-loader v4 ↓

fix Upgrade webpack to v5 or downgrade postcss-loader to v4

breaking jiti updated from v1 to v2 in v8.2.0, may break ESM config loading ↓

fix Ensure jiti v2 is compatible with your config; test ESM load

deprecated Option 'config' is deprecated; use 'postcssOptions' with a config file or inline options ↓

fix Use 'postcssOptions' field instead of 'config'

gotcha If using CSS-in-JS, you must set 'execute: true' and a PostCSS parser like postcss-js ↓

fix Add execute: true and postcssOptions.parser: 'postcss-js' in loader options

gotcha Source maps may conflict if 'css-loader' sourceMap is disabled ↓

fix Enable sourceMap in css-loader options and set devtool in webpack config

Install

npm install postcss-loader

yarn add postcss-loader

pnpm add postcss-loader

Imports

postcss-loader

wrong

import postcssLoader from 'postcss-loader'

correct

module.exports = { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] } }

postcss-loader is a webpack loader, not a JavaScript module. It is configured via webpack config, not imported directly.

Quickstart

Install required dependencies and configure postcss-loader in webpack to process CSS with PostCSS plugins.

npm install --save-dev postcss-loader postcss webpack webpack-cli style-loader css-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['postcss-preset-env', { /* options */ }]
                ]
              }
            }
          }
        ]
      }
    ]
  }
};