csswebpacksassnext.jscss-purge

How do I use PurgeCSS with Next.js and module.scss files?

I've got component level .scss files (filename.module.scss) and I want to purge unused css from these files.

Since the styling classnames get hashed. I was wondering how I can get purgeCSS to work with a next.js app that uses module.scss files for most of the styling.

https://github.com/FullHuman/purgecss/issues/163#issuecomment-526607181 this issue here goes over it but for a react application

Solution

  • You can use a dedicated NPM package next-purge-css-modules, made just for this purpose:

    npm install next-purge-css-modules

    and in your next.config.js, use:

    const withPurgeCSSModules = require('next-purge-css-modules');
const nextConfig = { ... };

module.exports = withPurgeCSSModules(nextConfig);