How to turn off CSS module feature in Next.js?

Question

Next.js only allow to import Global CSS in _App.js. But we can't import global CSS in every component , for that we have to use CSS module as per the restriction by Next.js.

Now I am migrating a large project to Next.js and it is very difficult to convert css of of every module to CSS modules. is there any ways to remove this restriction ?

Restriction Docs Link : https://nextjs.org/docs/messages/css-global

Answer 1

I hope answering this does not find us late. You can actually tamper with the Webpack configuration by editing the next.config.js file like the following:

const path = require('path');

const nextConfig = {
  webpack(config) {
    // if not work, try `config.module.rules[2]...`
    config.module.rules[3].oneOf.forEach((one) => {
      if (!`${one.issuer?.and}`.includes('_app')) return;
      one.issuer.and = [path.resolve(__dirname)];
    });
    return config;
  },
};

module.exports = nextConfig

Here is the reference: Disable CSS Modules in Next.js project