Next.js CSS模块化类名生成格式异常问题求助

你好呀！刚学Next.js就遇到这种类名生成的小问题，确实容易让人摸不着头脑，我来帮你梳理下可能的原因和解决方向～

首先先确认下你的问题：之前用Next.js的CSS Modules时，生成的类名是类似style_list__23jbsd的简洁格式，但最近没改代码的情况下，类名变成了style-modules-css-module__7Ml__list这种带长前缀的奇怪格式，对吗？

结合你的代码和项目情况，我整理了几个可能的排查方向：

1. 检查Next.js的配置或版本变化 #

Next.js的CSS模块类名生成规则，可能会因为版本升级或者自定义配置改变而变化：

• 先看看你的next.config.js文件，如果里面有自定义的CSS模块配置（比如cssLoaderOptions），检查localIdentName的模板是不是被修改了。默认的Next.js CSS模块类名格式是[name]__[local]___[hash:base64:5]，如果配置里改成了包含路径、完整文件名的模板，就会生成很长的类名。
  举个例子，如果你的配置是这样，就会改变类名格式：

  module.exports = {
    cssLoaderOptions: {
      localIdentName: '[path][name]__[local]--[hash:base64:5]',
    },
  }
  

• 如果你没改配置，那可能是不小心升级了Next.js版本，不同版本的默认类名规则可能有调整，可以尝试回退到之前能正常生成类名的Next.js版本试试。

2. 清理开发缓存 #

Next.js的开发缓存有时候会引发一些莫名其妙的问题，试试以下步骤：

• 删除项目根目录下的.next文件夹
• 重启开发服务器时加上--no-cache参数，也就是用next dev --no-cache启动，强制跳过缓存
• 如果还是不行，可以删除node_modules/.cache文件夹（如果存在的话）再重启

3. 检查依赖兼容性 #

如果最近安装了新的依赖包，比如手动安装了css-loader、sass-loader这类和CSS处理相关的包，可能会和Next.js内置的版本冲突，导致类名生成异常：

• 先删除node_modules文件夹和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install），让依赖重新安装并保持兼容

4. 验证SCSS预处理器配置 #

你用的是.module.scss文件，Next.js内置了SCSS支持，但如果之前手动配置过sassOptions或者安装了旧版的SCSS插件（比如@zeit/next-sass），也可能有问题：

• 检查next.config.js里有没有sassOptions的自定义配置，暂时注释掉试试
• 确认没有安装多余的SCSS相关插件，Next.js 12+版本已经内置了sass支持，不需要额外安装@zeit/next-sass这类包

另外看你的代码写法是完全没问题的：

• 正确导入了SCSS模块：import styles from "./nav.module.scss"
• SCSS嵌套写法&_item生成的.list_item类，对应styles.list_item的调用是正确的
• 项目结构里Nav.js和nav.module.scss在同一个components文件夹下，路径也没问题

如果以上方法都试过还是不行，你可以新建一个干净的Next.js项目，把这段Nav组件和SCSS代码复制过去，看看能不能正常生成类名——如果新项目没问题，那大概率是现有项目的配置或缓存出了问题。

备注：内容来源于stack exchange，提问作者arisha