NextJS v14如何哈希CSS类名？旧配置报错求短哈希实现

问题原因 #

之前的配置报错「getLocalIdent is not found」，是因为Next.js v14调整了webpack中css-loader的配置结构，原有的规则遍历方式无法正确定位到css-loader的modules配置项，导致无法覆盖默认的类名生成逻辑。

解决方案 #

以下是适配Next.js v14的配置，可实现生产环境生成纯短哈希类名（如9pt5S）：

1. 安装依赖（若未安装） #

确保项目中已安装loader-utils：

npm install loader-utils --save-dev
# 或
yarn add loader-utils --dev

2. 修改next.config.js配置 #

替换原配置为以下内容：

const path = require("path");
const loaderUtils = require("loader-utils");

// 生成纯哈希类名的函数
const hashOnlyIdent = (context, localIdentName, localName) => {
  const hash = loaderUtils.getHashDigest(
    Buffer.from(
      `file:${path.relative(context.rootContext, context.resourcePath)}#local:${localName}`
    ),
    "md4",
    "base64",
    6
  );
  // 确保哈希符合CSS类名规范
  return hash.replace(/[^a-zA-Z0-9-_]/g, "_").replace(/^(-?\d|--)/, "_$1");
};

module.exports = {
  webpack(config, { dev }) {
    // 仅在生产环境修改类名生成规则
    if (!dev) {
      // 遍历所有webpack规则，找到处理CSS模块的loader
      config.module.rules.forEach((rule) => {
        // 查找使用了css-loader的规则
        if (rule.use?.some((loader) => loader.loader?.includes("css-loader"))) {
          rule.use.forEach((loader) => {
            if (loader.loader?.includes("css-loader")) {
              // 确保modules配置存在，然后覆盖getLocalIdent
              loader.options.modules = {
                ...loader.options.modules,
                getLocalIdent: hashOnlyIdent,
              };
            }
          });
        }
      });
    }

    return config;
  },
};

3. 关键调整说明 #

• 调整规则遍历逻辑：不再依赖oneOf的特定结构，改为直接遍历所有规则并查找css-loader，适配Next.js v14的webpack配置结构
• 简化哈希生成的输入内容，确保仅基于文件路径和本地类名生成唯一哈希
• 保留类名合法性处理，避免生成不符合CSS规范的类名

验证方式 #

部署到生产环境（如Vercel）后，查看页面源码中的CSS类名，会发现原本类似navbar_flag__9pt5S的类名已变为纯短哈希形式（如9pt5S）。

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