How to combine and use multiple Next.js plugins

Question

I would like to use css and scss in next.jsapp.

I have next.config.js in my project.

This configuration is for scss:

// next.config.js
const withSass = require('@zeit/next-sass');

module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
})

I don't know how to combine const withCSS = require('@zeit/next-css'); with my current config.

I would like to use custom config for scss (from my code snipet).

Can someone help me configure next for css and scss modules?

I tried:

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

module.exports = withCSS(withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
}))

Not working...

Pinta

Answer 1

You can use next-compose-plugins and combine multiple next.js plugins as follows:

// next.config.js
const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withPlugins(
  [
    [withSass, { /* plugin config here ... */ }],
    [withCSS,  { /* plugin config here ... */ }],
  ],
  {
    /* global config here ... */
  },
);

Lumbago

How can this be done without the compose library? – Martyr

Answer 2

This can also be done pretty easily without the next-compose-plugins library.

It's arguably a bit clearer too:

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

module.exports = (phase, { defaultConfig }) => {
  const plugins = [
    withSass({ /* Plugin config here ... */ }),
    withCSS({ /* Plugin config here ... */ }),
  ];
  return plugins.reduce((acc, next) => next(acc), {
    /* global config here ... */
  });
};

I discovered this whilst complaining here: Source

Baldwin

Answer 3

I believe the proper solution is described here, as far as you use next:12.3.1 or upper version

module.exports = (_phase, { defaultConfig }) => {
const plugins = [withStaticImport, withBundleAnalyzer, withCustomWebpack]
return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...config })
}

Principate

Answer 4

Update for 2023:

Consider using next-recompose-plugins which provides a clean and easy API for Next.js's plugins configuration and composition.

Here is an example:

const config = new Config(async () => {
    await something();
  
    return {...};
  })
  .applyPlugin((phase, args, config) => {
    return plugin1(config);
  }, 'plugin-1')
  .applyPlugin((phase, args, config) => {
    return plugin2(config);
  }, 'plugin-2')
  .applyPlugin((phase, args, config) => {
    return plugin3(config);
  }, 'plugin-3')
  .build();

Carson