purging unused CSS

[ShayMalchi]

Hi,
I'm looking for a way to reduce the css chunk size by an external library (Semantic UI for React). I've explored purgecss but it ended up removing more than it had to. What are you using in your next.js projects?

my next.config.js is this:

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(
  withSass({
    target: 'serverless',
    webpack(config) {
      config.module.rules.push({
        test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader'
        }
      });
      return config;
    }
  })
);

Thanks

[Levolger]

Not sure if you are still looking, but myself I use the native implementation for sass with next.js and use the postcss-purgecss plugin to purge my unused CSS. For me, this combination works pretty well, with the following posscss.config.js:

const config = { content: ["./pages/**/*.js", "./components/**/*.js"], whitelist: ["html", "body"], };
module.exports = { plugins: process.env.NODE_ENV === "production" ? { "@fullhuman/postcss-purgecss": config } : {}, };