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.