Next.js 项目中禁用 CSS Modules

1,223 阅读1分钟

Next.js 项目默认开启 CSS Modules,未提供开关。

若不想使用,可在 next.config.js 中修改 webpack 配置:

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;
  },
};

完了。

不是,你为啥不想用 CSS Modules???

考虑到以下情况,可能不想用 CSS Modules:

  1. 自己的项目,规划特别合理,根本不会冲突
  2. 大家 CSS 都特别好,规划特别合理,根本不会冲突
  3. CSS Modules 破坏了 CSS 自身可组合继承的优点(当然也被认为是缺点)
  4. CSS Modules 太丑了,破坏了 HTML + CSS 的代码美感
  5. 每个都写 className={styles.xxx} 太烦人了