Next - Purgecss

Module
To simply configure PurgeCSS with next.js, you can use next-purgecss.
Installation
1. Install the packages
next-purgecss requires one of the following css next plugins :
​next-css​
​next-less​
​next-sass​
Just pick the one that fits your needs. In the following steps, I will use next-css but it works the same for the other css next plugins.
For example, install next-css and next-purgecss :
yarn add @zeit/next-css next-purgecss --dev
or with npm :
npm install @zeit/next-css next-purgecss --save-dev
2. Edit next.config.js.
// next.config.js
const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')
​
module.exports = withCss(withPurgeCss())
Options
By default, this plugin will scan components and pages directories for classnames.
Under the hood, next-purgecss uses the PurgeCSS Webpack Plugin. You can pass custom options to the plugin by defining purgeCss object in your next.config.js :
// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCss: {
      whitelist: () => ['my-custom-class']
    }
  })
)
See the page dedicated to the PurgeCSS Webpack Plugin for more information.

Vue

Nuxt

Last modified 3yr ago