NextJS v13.5.2 + Tailwind CSS 类名哈希配置问题求助

问题分析 #

你当前的webpack配置未生效，核心原因是未精准命中Next.js 13.5中处理CSS模块的css-loader规则，导致localIdentName和自定义getLocalIdent逻辑未被应用，控制台无日志输出也证明了这一点。

可行解决方案 #

方案1：精准修改webpack中css-loader配置 #

调整next.config.js的webpack配置逻辑，直接定位处理.module.css的规则，确保修改生效：

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

module.exports = {
  reactStrictMode: false,
  webpack: (config, { dev }) => {
    // 遍历所有webpack规则，定位CSS模块处理规则
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          // 匹配.module.css/.module.scss等CSS模块文件规则
          if (oneOfRule.test?.test('.module.css') || oneOfRule.test?.test('.module.scss')) {
            oneOfRule.use.forEach(loader => {
              if (loader.loader?.includes('css-loader')) {
                // 覆盖css-loader的模块配置
                loader.options.modules = {
                  ...loader.options.modules,
                  // 开发环境保留可读类名，生产环境用哈希
                  localIdentName: dev ? '[path][name]__[local]--[hash:base64:5]' : '[hash:base64:6]',
                  getLocalIdent: (context, _, exportName) => {
                    return loaderUtils.getHashDigest(
                      Buffer.from(`filePath:${path.relative(context.rootContext, context.resourcePath).replace(/\\+/g, '/')}#className:${exportName}`),
                      'md4',
                      'base64',
                      6
                    ).replace(/[^a-zA-Z0-9-_]/g, '_').replace(/^(-?\d|--)/, '_$1');
                  }
                };
                console.log('css-loader 模块配置已更新');
              }
            });
          }
        });
      }
    });
    return config;
  },
};

方案2：使用Next.js实验性配置（更简洁） #

Next.js 13+提供了实验性配置项，无需手动修改webpack规则即可直接设置CSS模块类名格式：

module.exports = {
  reactStrictMode: false,
  experimental: {
    // 生产环境直接生成6位哈希类名
    cssModuleLocalIdentName: '[hash:base64:6]',
  },
};

关键注意事项 #

1. 仅对CSS模块生效：只有后缀为.module.css（或.module.scss等）的文件才会触发类名哈希，全局CSS文件不会受影响。
2. Tailwind类名不受影响：Tailwind生成的全局类名不会被哈希，此配置仅作用于你自定义的CSS模块类名。
3. 验证生效：运行项目后，查看浏览器DevTools中的HTML元素类名，或检查控制台是否输出配置更新日志。

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