全局CSS只能在app/layout.tsx第一行静态导入，如import './globals.css'；局部样式必须用.module.css后缀并对象解构使用，如import styles from './Button.module.css'；其他写法均报错或失效。
全局CSS只能在app/layout.tsx顶层静态导入，局部样式必须用.module.css后缀并对象解构使用——其他任何写法都会报错或失效。
全局CSS必须写在app/layout.tsx第一行
Next.js 14（App Router）已完全弃用pages/_app.js对全局样式的处理能力。哪怕你保留该文件，它也不会生效，还可能触发构建警告。
- 导入语句必须是
app/layout.tsx文件的第一行，前面不能有注释、import React、"use client"等任何内容 - 推荐路径：
import './globals.css'（把文件放在app/globals.css），或import '../styles/global.css'（需确保路径准确） - 不能动态导入：
import('./globals.css')、require()、useEffect里加载全无效 - 如果项目同时存在
pages/和app/目录，pages/页面仍走pages/_app.js，但那是另一套逻辑，互不干扰
.module.css是局部样式的唯一合法形式
普通.css文件不能在组件中直接import作为局部样式——Next.js会把它当全局CSS处理，大概率报Global CSS cannot be imported from files other than your Custom _app.js。
- 文件名必须含
.module.css（不是.css、.modules.css、.less） - 导入写法固定：
import styles from './Button.module.css'，然后用className={styles.button} - 硬写
className="button"无效：类名已被哈希化（如button_abc123），无法匹配 - 支持
:global()穿透、嵌套、@apply（配合Tailwind），但所有规则都依赖模块化解析链
别碰next.config.mjs里的CSS配置
Next.js 14 App Router 默认禁用自定义cssModules配置，也移除了对withLess等插件的支持。你在配置里加cssModules: { auto: false }或自定义postcss规则，不仅没用，还可能让样式丢失或构建失败。
立即学习“前端免费学习笔记（深入）”；
- 删掉
next.config.mjs中所有与css、postcss、webpack相关的自定义配置（除非你明确需要PostCSS插件） - 想用Sass？直接改后缀为
.module.scss，无需额外loader，开箱即用 - 想用Less？官方已弃用；
next-with-less在v14兼容性极差，常见Unexpected character '@'或Selector is not pure错误——改用Sass
混用路由时样式隔离是默认行为，不是bug
如果你的项目同时启用Pages Router（pages/）和App Router（app/），它们的样式系统完全独立：
-
pages/_app.js里的import '../styles/global.css'只影响pages/下的页面 -
app/layout.tsx里的import './globals.css'只作用于app/下的路由 - 两个
.module.css文件可以同名、同内容，不会冲突——模块化作用域天然隔离 - 最容易被忽略的是：App Router下
app/layout.tsx里加了"use client"，会导致CSS无法服务端注入，部分样式在首屏缺失
