4

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

TigerCode
  • 315
  • 3
  • 15
  • 1
    Have you tried what's in the official documentation: https://purgecss.com/guides/next.html#next-js? What does your PostCSS config file look like? – juliomalves Jan 06 '22 at 09:28
  • @juliomalves I did but the issue was that my styling from my modules was removed. I have fileName.module.scss for every component / page file and they went poof. – TigerCode Jan 21 '22 at 20:10
  • A few of my packages that require extra css seem to also have all their CSS just removed. – TigerCode Jan 21 '22 at 20:14
  • Edit: Seems like its working now (modules) using the config from that link you sent me - but some library styles are missing (react-multi-carousel has import "react-multi-carousel/lib/styles.css"; imported in _app.js) – TigerCode Jan 21 '22 at 20:33
  • I tried adding their class names to the whitelist in postcss.config.js ``` safelist: ["html", "body", /^react-/, /^navbar-/] ``` but this didn't do anything – TigerCode Jan 21 '22 at 20:54

1 Answers1

0

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);
wscourge
  • 10,657
  • 14
  • 59
  • 80
  • `withPurgeCSSModules` is not in the list of allowed properties for `nextConfig`. Also the package is outdated. – Sebi Apr 11 '23 at 03:55