How one can PostCSS with Webpack 5

Should you occur to have a customized Webpack setup, you could be questioning how one can arrange PostCSS with Webpack. This brief tutorial walks you thru the method. To start with, you must set up the PostCSS loader and a smart PostCSS configuration to your dev dependencies:

npm set up --save-dev postcss-loader postcss-preset-env
Subsequent, create a postcss.config.js file the place you’ll reference all of your PostCSS plugins. On this case, we’ll use probably the most generally used PostCSS plugin known as postcss-preset-env which permits smart defaults:
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      browsers: 'last 2 versions',
    }),
  ],
};
Final, use the PostCSS loader for all CSS (and SCSS, when you occur to have SASS too) information in your Webpack configuration:
...
module.exports = {
  ...
  module: {
    guidelines: [
      ...
      css)$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      ,
    ],
  },
  ...
};
Now, if you’re utilizing CSS like the next, it is going to be mechanically prefixed for sure browsers:
// earlier than
.column {
  show: flex;
  flex-direction: column;
}
// after
.column {
  show: -webkit-box;
  show: -ms-flexbox;
  show: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: regular;
  -ms-flex-direction: column;
  flex-direction: column;
}
This is just one default coming with the PostCSS presets. You may discover extra of them on their web site or discover extra PostCSS plugins.