Speedy and Stylish - How to style NextJS with Bootstrap 5, SASS, and PurgeCSS

Hi, thanks for your article on how to include sass and bootstrap into a next.js project. As for the caveat, you can evaluate the process.env.NODE_ENV variable and add the purgecss setting block only in the production environment. For more, see the next.js docs: Customizing Plugins . Here is my postcss.config.js file:

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {flexbox: 'no-2009'},
        stage: 3,
        features: {'custom-properties': false},
      },
    ],
  ],
};

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins.push([
    '@fullhuman/postcss-purgecss',
    {
      content: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ['html', 'body'],
    },
  ]);
}

In my still empty project that includes bootstrap, I could decrease the size of the .next folder from 6.6 MB to 5.2MB using purgecss in the production build.