postcss-loader 7.3.3

PostCSS loader, postcss-loader, is a processor for CSS used within webpack. It allows you to process your CSS with PostCSS, an advanced tool for transforming CSS in JavaScript. PostCSS loader can greatly enhance your workflow by allowing you to use next-generation CSS features, as well as other capabilities such as autoprefixing, minification, and more. It should be used after css-loader and style-loader, but before any other preprocessor loaders like sass-loader or less-loader.

To start using postcss-loader, first you need to install it alongside postcss using npm, yarn, or pnpm. For example, you can install it via npm using the following command:

npm install --save-dev postcss-loader postcss

After installing postcss-loader, you should then include it in your webpack configuration file, webpack.config.js. Suppose you want to use the postcss-preset-env plugin with postcss-loader. The necessary configuration would look like the following:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options for "postcss-preset-env"
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

Note that it is also possible to provide PostCSS options and specify plugins via a configuration file, referred to as postcss.config.js. This file is automatically searched for by the loader when included in your project.

The full documentation for Postcss-loader can be found on its GitHub repository at https://github.com/webpack-contrib/postcss-loader. This manual includes comprehensive details on setting up and configuring the package, as well as usage examples for a variety of scenarios.