Next-plugins: How to make it works with multi plugins?

[rohmanhm]

I think this issue might similar to #20

If I want to use a plugin, then I need to export on next.config.js like this

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

module.exports = withCSS({
  cssModules: true,
  webpack: (config) => {
    return config
  }
})

But, how to use it with 2 or more plugins?

As I read on #20, I can't use it like

module.exports = withCSS(withTypescript(withSass(...)))

Thanks

[timneutkens]

You can do exactly this, given you import the correct modules:

module.exports = withCSS(withTypescript(withSass({
 cssModules: true,
 webpack: (config) => {
    return config
 }
})))

[vinutha93bnvs]

Use this https://github.com/JerryCauser/next-compose to export multiple modules from next.config.js

[dryleaf]

Along with the css configurations mentioned here, What if I want to export also the following settings in next.config.js:

module.exports = {
  useFileSystemPublicRoutes: false,
  poweredByHeader: false
}

How can this be achieved?

[jcruzdzk]

What is the best practice for this @timneutkens next.config.js:

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

module.exports = {
poweredByHeader: false,
};

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

Help, pls.

[dryleaf]

Did anyone find a solution multiple plugin configurations like described in https://github.com/zeit/next-plugins/issues/34#issuecomment-527658864 ?

[vhnam]

@dryleaf @jcruzdzk I tried this and success.

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

module.exports = withCSS({
  poweredByHeader: false,
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
        },
      },
    });
    return config;
  },
});