React/Next.js组件文件夹内CSS使用报错，路径问题排查

• 路径层级验证：先确认组件文件的实际位置。如果组件在components根目录下，../styles/Home.module.css路径是正确的；但如果组件在components的子文件夹（比如components/Layout），则需要多退一层目录，改用../../styles/Home.module.css。可以在编辑器中按住Ctrl（Windows）/Cmd（Mac）点击导入路径，若能直接跳转到Home.module.css文件，说明路径没问题，反之则路径错误。

• CSS模块使用规范：导入后必须通过homeStyles.类名的方式应用样式，示例代码：

  <div className={homeStyles.container}>页面内容</div>
  

  不能直接写className="container"，否则无法识别CSS模块生成的哈希类名。

• 文件名大小写检查：注意系统的大小写敏感性（比如Linux、macOS），确保本地Home.module.css的文件名和导入路径完全一致，避免因大小写差异导致找不到文件。

• 清理缓存并重启服务：Next.js开发服务器可能存在缓存问题，尝试停止服务后重新执行npm run dev，或者删除项目根目录下的.next文件夹后再重启服务器。

• Next.js版本适配：如果使用的是Next.js 9.2之前的版本，需要在next.config.js中手动开启CSS模块支持：

  module.exports = {
    cssModules: true,
  }
  

  9.2及以上版本默认支持CSS模块，无需额外配置。

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