next.js要求全局css只能在_pages/_app.tsx_或_app/layout.tsx_顶层静态导入，且路径必须为静态绝对路径、文件须为纯css；css modules则必须用_.module.css_后缀并在组件内按需导入，严禁在根布局中导入模块化样式。
不能在同一个文件里混用全局CSS和CSS Modules导入，Next.js会直接报错；但可以在项目中并存两者——关键在于「谁在哪儿导入」。
全局CSS只能从_app.tsx或app/layout.tsx顶层静态导入
这是Next.js的硬性限制，不是建议。任何其他位置（比如pages/index.tsx、components/Button.tsx、甚至_app.tsx函数体内）导入globals.css都会触发Global CSS cannot be imported from files other than your Custom _app.js错误。
- Pages Router：必须有
pages/_app.tsx，且第一行就是import '../styles/globals.css'（前面不能有空行、注释或import语句） - App Router：删掉
pages/_app.tsx（它会被忽略），改用app/layout.tsx，首行写import './globals.css'或import '@/styles/globals.css' - 路径必须是静态绝对路径：
../styles/globals.css或/styles/globals.css合法，./globals.css在_app.tsx同级时才有效，否则解析失败 - 该文件必须是纯CSS：不能含
:global，不能叫globals.module.css，也不能被next.config.js设为自动模块化（如cssModules: { auto: true }）
CSS Modules必须用.module.css后缀并在组件内按需导入
Next.js只认.module.css（或.module.scss等）后缀来启用CSS Modules。只要名字带.module，它就会自动哈希类名、隔离作用域。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 正确写法：
Button.module.css→ 在Button.tsx中import styles from './Button.module.css' - 错误写法：
Button.css或Button.scss→ 被当作全局样式处理，一旦在组件里import就报错 - 严禁在
_app.tsx或app/layout.tsx中import任何.module.css文件，会触发Module parse failed - 支持Sass/Less：装好
sass或less，命名改为Button.module.scss即可，无需额外配置
常见混用错误及对应现象
所谓“混合使用”，多数人实际踩的是导入位置或命名错误，而非能力缺失。
- 在
pages/index.tsx里同时import '../styles/globals.css'和import styles from './Home.module.css'→ 构建失败，报Global CSS cannot be imported... - 把
globals.css误命名为globals.module.css，又在_app.tsx里导入 → 报Module parse failed，因为模块化CSS不允许全局导入 - 在
app/layout.tsx里先import './globals.css'，再import Header from './Header'，而Header.tsx里又import './Header.module.css'→ 合法，且推荐：全局负责重置/变量，模块负责组件细节 - 同时在
_app.tsx和pages/index.tsx中导入同一份globals.css→ 即使没报错，也会导致样式重复插入，影响specificity和加载性能
App Router与Pages Router共存时的导入规则
如果项目里同时存在pages/和app/目录，它们走两套独立样式链，互不干扰，但必须各自守规矩。
-
pages/下的页面（如pages/about.tsx）只认pages/_app.tsx里的全局CSS导入 -
app/下的路由（如app/dashboard/page.tsx）只认app/layout.tsx里的全局CSS导入 - 组件级CSS（
.module.css）可跨目录复用，只要路径对、导入位置对 —— 例如components/Button.module.css可在pages/和app/中都被import - 不要试图让
pages/_app.tsx和app/layout.tsx都导入同一份globals.css，除非你明确需要两套独立的全局样式
真正容易被忽略的点是：CSS顺序由导入顺序决定，而Next.js不会帮你去重或排序。哪怕只是多了一行import，也可能让按钮的margin意外覆盖掉重置样式。所以别图省事，在布局文件里堆一堆import，每个CSS文件只导入一次，且严格按依赖顺序排列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
