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.
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.