How to combine and use multiple Next.js plugins
You can use next-compose-plugins and combine multiple next.js plugins as follows:
// next.config.jsconst 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 ... */ },);
This can also be done pretty easily without the next-compose-plugins library.
It's arguably a bit clearer too:
// next.config.jsconst 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