如何在NextJS中无需添加.module.扩展名使用CSS Modules？

Next.js默认通过*.module.css后缀识别CSS Modules，要直接用*.css实现相同效果，只需修改next.config.js里的webpack配置，让所有（或指定）.css文件按CSS Modules规则处理：

1. 基础配置（所有.css都作为CSS Modules） #

修改项目根目录的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // 定位到Next.js内置的CSS处理规则
    const cssRuleGroup = config.module.rules.find(rule => rule.oneOf);
    const cssRules = cssRuleGroup.oneOf.filter(rule => rule.test?.test('.css'));

    cssRules.forEach(rule => {
      // 匹配所有.css文件
      rule.test = /\.css$/;
      // 配置css-loader启用CSS Modules
      rule.use.forEach(loader => {
        if (loader.loader.includes('css-loader')) {
          loader.options.modules = {
            mode: 'local',
            // 可选：自定义编译后的类名格式，默认是哈希值，这里保留原类名加短哈希
            localIdentName: '[local]__[hash:base64:5]',
          };
        }
      });
    });

    return config;
  },
};

module.exports = nextConfig;

2. 保留全局样式（排除特定文件） #

如果有全局样式文件（比如app/globals.css），不想让它被模块化，可以修改匹配规则，排除该文件：
把上面的rule.test = /\.css$/;替换成：

// 匹配除globals.css外的所有.css文件
rule.test = /^(?!.*globals\.css$).*\.css$/;

3. 使用方式 #

配置完成后，直接导入.css文件就能当作CSS Modules使用：

import styles from './button.css';

export default function Button() {
  return <button className={styles.btn}>点击按钮</button>;
}

对应的button.css：

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  background: #0070f3;
  color: white;
}

这样就不用再给文件名加.module后缀，导入路径也更简洁。

内容的提问来源于stack exchange，提问作者JakubMu