How to use it with custom Next.js configuration

[haivx]

I have problem when using next-purgecss with custom next config. This code below is my next.config.js file. How can I add next-purgecss into it?

require('dotenv').config();
const Dotenv = require('dotenv-webpack');
const withCSS = require('@zeit/next-css');
const path = require('path')

module.exports = withCSS({
  webpack: function (config, options, isServer) {
    config.module.rules.push({
      test: /\.(ttf|woff|woff2|eot|otf)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
            fallback: 'file-loader',
            publicPath: `/_next/static/fonts/`,
            outputPath: `${isServer ? '../' : ''}static/fonts/`,
            name: '[name]-[hash].[ext]',
          },
        },
      ],
    });

    config.plugins = [
      ...config.plugins,
      new Dotenv({
        path: path.join(__dirname, '.env.development'),
        systemvars: true
      })
    ]

    return config;
  }
})

How can I fix it ? Thank you.

[lucleray]

Just add it like this:

require('dotenv').config();
const Dotenv = require('dotenv-webpack');
const withCSS = require('@zeit/next-css');
const withPurgeCss = require('next-purgecss');
const path = require('path')

module.exports = withCSS(withPurgeCss({
  webpack: function (config, options, isServer) {
    config.module.rules.push({
      test: /\.(ttf|woff|woff2|eot|otf)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
            fallback: 'file-loader',
            publicPath: `/_next/static/fonts/`,
            outputPath: `${isServer ? '../' : ''}static/fonts/`,
            name: '[name]-[hash].[ext]',
          },
        },
      ],
    });

    config.plugins = [
      ...config.plugins,
      new Dotenv({
        path: path.join(__dirname, '.env.development'),
        systemvars: true
      })
    ]

    return config;
  }
}))