Next.js 13中CSS Modules样式不生效问题求助

以下是排查和解决的具体步骤：

• 检查CSS Modules文件的命名与路径
  确保文件名严格遵循[name].module.css格式，不能写成header.css或header.modules.css这类错误格式。同时确认导入路径正确：如果header.js在app/目录下，header.module.css在根目录styles/文件夹中，那么import styles from '../styles/header.module.css'是正确的。也可以配置绝对路径避免相对路径出错：

  // next.config.js
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config) => {
      config.resolve.alias['@'] = __dirname;
      return config;
    },
  };
  
  module.exports = nextConfig;
  

  之后导入改为import styles from '@/styles/header.module.css'即可。

• 确认组件内CSS Modules的使用方式
  在header.js中确保正确导入并匹配类名：

  import styles from '../styles/header.module.css';
  
  export default function Header() {
    return (
      <header>
        <h1 className={styles.big_title}>网站标题</h1>
      </header>
    );
  }
  

  注意CSS文件中的类名要和styles.xxx完全对应，比如CSS里写.big_title，就不能用styles.bigTitle（Next.js支持驼峰转换，但统一命名风格更稳妥）。

• 清除缓存并重启开发服务器
  开发模式下Next.js可能存在缓存，导致新样式未加载：

  1. 删除项目根目录的.next文件夹
  2. 停止当前服务器，重新执行npm run dev或yarn dev

• 排查全局样式的优先级冲突
  如果之前的global.css里有同名的.big_title类，全局样式优先级会高于CSS Modules。可以通过浏览器开发者工具查看元素样式面板，确认是否存在覆盖情况。若冲突，可修改CSS Modules的类名，或缩小全局样式的作用范围。

• 验证RootLayout中Header组件的渲染逻辑
  确保layout.js中正确导入并渲染Header：

  import './global.css';
  import Header from './header';
  
  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <body>
          <Header />
          <main>{children}</main>
        </body>
      </html>
    );
  }
  

  确认Header确实在RootLayout中被渲染，而非仅在某个page组件中引用。

• 考虑升级Next.js版本
  13.1.1是App Router的早期版本，可能存在CSS Modules相关的隐性bug，升级到13.4及以上的稳定版本，大概率能解决这类问题。

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