Next.js配置Webpack实现CSS Modules同时保留原始类名与哈希类名

要实现CSS Modules输出同时包含哈希类名和原始类名的效果，只需在next.config.js中自定义Webpack配置，修改css-loader的类名生成规则即可，步骤如下：

1. 编辑或创建next.config.js #

在项目根目录的next.config.js中添加Webpack自定义配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 遍历Webpack规则，定位到CSS Modules的处理逻辑
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test?.test('.css') && oneOfRule.use) {
            oneOfRule.use.forEach(loader => {
              // 找到css-loader并修改其Modules配置
              if (loader.loader.includes('css-loader') && loader.options.modules) {
                // 设置类名格式：带哈希的类名 + 原始类名
                loader.options.modules.localIdentName = '[local]_[hash:base64:5] [local]';
                
                // 若需自定义哈希生成逻辑，可替换为getLocalIdent函数（示例）
                // loader.options.modules.getLocalIdent = (context, _, localName) => {
                //   const hash = require('crypto')
                //     .createHash('md5')
                //     .update(context.resourcePath + localName)
                //     .digest('base64')
                //     .slice(0, 5);
                //   return `${localName}_${hash} ${localName}`;
                // };
              }
            });
          }
        });
      }
    });
    return config;
  },
};

module.exports = nextConfig;

2. 配置说明 #

• 通过修改css-loader的modules.localIdentName参数，指定类名生成格式为[local]_[hash:base64:5] [local]，其中：
  • [local]代表原始类名
  • [hash:base64:5]代表截取5位的base64哈希值
• 若需要更灵活的类名生成规则，可使用getLocalIdent函数自定义逻辑，注释中的代码展示了手动生成哈希并拼接原始类名的方式。

3. 验证效果 #

配置完成后，重启Next.js开发服务，使用CSS Modules的代码：

import styles from '../styles.module.css'
// ...
<div className={styles.hello}>Hello World</div>

会输出符合需求的HTML：

<div class="hello__Ux3Zx hello">Hello World</div>

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