组件级 css 必须使用 .module.css 后缀，通过 import styles from './x.module.css' 解构使用 classname={styles.xxx}；普通 .css 文件不支持组件作用域，动态导入或绝对路径会导致 fouc 或解析失败。
组件级 CSS 必须用 .module.css 后缀
Next.js 不允许在普通 .css 文件中写组件作用域样式——它会直接报错或全局污染。真正能实现“组件级”的唯一方式是使用 CSS Modules，而识别它的唯一信号就是文件名必须以 .module.css 结尾（注意不是 .css.module 或 .modules.css）。
常见错误现象：import './Button.css' 看似能跑通，但类名不会哈希、样式会泄漏到其他组件；构建时若开启严格模式，还会触发警告。
-
Button.module.css✅ 正确命名，Next.js 自动启用模块化 -
Button.css❌ 普通 CSS，只能用于全局场景（且仅限_app.tsx或app/layout.tsx） -
Button.modules.css❌ 拼写错误，不被识别为模块
导入后必须通过对象解构使用类名
不能像全局 CSS 那样直接写 className="btn"——CSS Modules 导出的是一个对象，类名是动态生成的哈希键。你必须先 import styles from './Button.module.css'，再用 className={styles.btn}。
容易踩的坑：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 写成
className="btn"→ 样式完全不生效，控制台无报错，极难排查 - 写成
className={styles['btn']}→ 虽然能运行，但破坏类型推导和 IDE 提示，没必要 - 在
useClient组件里漏掉"use client"声明 → 若该组件含状态或事件，服务端渲染会失败
App Router 下路径和导入位置无限制，但不能动态导入
在 app/ 目录结构下，你可以把 .module.css 放在任意层级（比如 app/components/Button.module.css），并在对应组件中直接 import，Next.js 会正确处理 SSR 和客户端 hydration。
但注意：
-
import('./Button.module.css')或require('./Button.module.css')❌ 动态导入无法参与服务端样式提取，会导致 FOUC（闪屏）或样式缺失 - 放在
app/layout.tsx里 import 组件级 CSS ❌ 没意义——它会被当成全局依赖注入所有路由，失去“组件级”隔离性 - 路径必须相对，不能用绝对路径别名（如
@/styles/Button.module.css）除非你配了tsconfig.json的paths，否则构建时报模块解析失败
与 Tailwind 混用时不要套娃写 class
很多人想“既用 Tailwind 又保留 CSS Modules”，结果写出 className={`${styles.container} text-lg bg-blue-500`}。这看似可行，但破坏了 Tailwind 的 PurgeCSS 安全性——未出现在源码字符串里的 class（比如 text-lg）可能被误删。
更稳妥的做法：
- 纯原子类逻辑 → 全用 Tailwind，不用
.module.css - 需复用复杂样式块 → 写进
.module.css，再用styles.xxx引入，Tailwind 类只作微调（如className={`${styles.card} p-4`}中的p-4是安全的，因为它是显式出现的） - 避免在
.module.css里写@layer utilities或嵌套@apply引用 Tailwind 类——PostCSS 插件链若未对齐，构建可能静默失败
.module.css 后缀，或用了 className="xxx" 字符串硬编码，样式就彻底消失——没有错误提示，只有白屏或错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
