Next.js 13中如何阻止CSS Modules生成唯一类名？

方案1：修改CSS Modules配置，保留原始类名 #

如果想继续通过styles.test的方式引用类名，但不生成哈希后缀，需要在next.config.js中调整webpack的css-loader配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 定位所有处理CSS/SCSS的规则集合
    const cssRuleSet = config.module.rules.find(rule => rule.oneOf).oneOf;
    
    cssRuleSet.forEach(rule => {
      const cssLoader = rule.use?.find(use => use.loader?.includes('css-loader'));
      if (cssLoader?.options?.modules) {
        // 强制类名为原始定义的名称，禁用哈希生成
        cssLoader.options.modules.localIdentName = '[local]';
      }
    });

    return config;
  },
};

module.exports = nextConfig;

配置生效后，使用className={styles.test}时，浏览器渲染出的类名将是test，而非带哈希的footer_test__09fuk。

方案2：使用全局样式直接引用类名 #

如果想直接写className="test"就能匹配样式，无需通过styles导入，改用全局样式即可：

• 将SCSS文件命名为不含.module.后缀的文件名（比如global.scss，不要用footer.module.scss）
• 在根布局文件中全局导入该样式：
  • App Router：在app/layout.tsx中添加import '../styles/global.scss';
  • Pages Router：在pages/_app.tsx中添加import '../styles/global.scss';

此时全局样式里的.test类会直接作用到所有设置了className="test"的元素上。

注意事项 #

• 禁用哈希类名后，CSS不再有组件级作用域隔离，相同类名会在全局范围内互相覆盖，需要自行避免命名冲突。
• 可以混合使用全局样式和CSS Modules：带.module.后缀的文件按模块规则处理（类名保留原始名称），不带后缀的按全局样式规则处理。

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