NextJS 13：CSS Modules仅在app文件夹生效，pages文件夹样式不生效求助

以下是针对pages目录下CSS Modules失效问题的排查和解决步骤：

• 严格遵循CSS Modules命名规范
  pages目录下的样式文件必须以[name].module.css命名，比如About.module.css，普通.css文件会被当作全局样式处理，无法通过模块化方式导入使用。

• 确认组件内的导入与使用方式
  在pages的页面组件中，需正确导入样式模块并通过对象调用类名，示例代码：

  import styles from './Profile.module.css';
  
  export default function Profile() {
    return <div className={styles.userCard}>用户卡片内容</div>;
  }
  

  禁止直接使用字符串类名（如className="userCard"），必须通过styles.xxx的方式引用模块化类名。

• 检查NextJS配置文件
  打开next.config.js，确保没有自定义webpack配置干扰CSS Modules的解析逻辑。默认NextJS 13对pages和app目录的CSS Modules均提供原生支持，若存在自定义webpack规则，需保留对.module.css文件的模块化处理：

  const nextConfig = {
    reactStrictMode: true,
    // 避免添加覆盖CSS Modules解析的配置
    webpack: (config) => {
      // 若需自定义规则，确保不对.module.css做错误处理
      return config;
    },
  };
  
  module.exports = nextConfig;
  

• 清除缓存并重启服务
  缓存问题可能导致样式未更新，执行以下命令清除缓存后重启开发服务器：

  rm -rf .next node_modules
  npm install
  npm run dev
  

  使用yarn或pnpm的话，替换对应安装和启动命令即可。

• 排查样式优先级冲突
  用浏览器开发者工具查看页面元素的样式，确认CSS Modules生成的哈希类名是否被全局样式、app目录下的样式覆盖。若存在冲突，可通过调整CSS选择器优先级（如增加嵌套层级）解决。

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