Disable CSS Modules in Next.js project

Next.js turns on CSS Modules by default, and no switch is provided.

If you don’t want it, you can modify the webpack configuration in next.config.js:

const path = require('path');

module.exports = {
  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;
  },
};

That’s all.

No, why don’t you want CSS Modules???

Considering the following situations:

1. A project by one person, the planning is particularly reasonable, there will be no conflict at all.
2. Everyone has very good CSS skills, the planning is particularly reasonable, there will be no conflict at all.
3. CSS Modules undermine the advantages of composable inheritance of CSS itself (of course, it is also considered a disadvantage).
4. CSS Modules are so ugly that they destroy the beauty of HTML + CSS.
5. It’s annoying to write classname = {styles.xxx}every time.