全局css必须在pages router的pages/_app.js或app router的app/layout.tsx顶层静态导入，且需为纯.css文件、首行引入、不可重复或混用模块化样式。
全局 CSS 必须在根布局顶层静态导入
Next.js 不允许你在任意组件里 import 全局 CSS，它只认两个位置：Pages Router 的 pages/_app.js 或 App Router 的 app/layout.tsx。而且必须是文件第一行，前面不能有注释、空行、甚至 import React —— 否则构建会直接报错 Global CSS cannot be imported from files other than your Custom _app.js（App Router 下则是提示找不到合法入口）。
- Pages Router：确认项目有
pages/_app.js且没启用app/目录 → 把import '../styles/globals.css'放在这文件最顶上 - App Router：确认项目有
app/layout.tsx→ 改用import './globals.css'（推荐路径），且不能加'use client' - 混用双路由？那得两套并行：Pages 页面走
pages/_app.js，App 页面走app/layout.tsx，互不继承
别把全局 CSS 当模块用
如果你的 CSS 文件名是 globals.module.css，或者内容里写了 :global{...}，又或者 next.config.js 里开了 cssModules: { auto: true }，Next.js 就会把它当模块处理。这时候再往 _app.js 或 layout.tsx 里 import，就会报 Module parse failed。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 全局 CSS 文件必须是纯
.css，不带module后缀，也不含:global包裹 - Tailwind 指令（
@tailwind base等）可以放进去，但必须全在同一个文件里，不能拆开 import - 如果用了 Sass，要确保已安装
sass，且 import 的是.scss文件，不是.module.scss
重复 import 会导致样式冲突
即使没报错，重复引入同一份全局 CSS 也会让浏览器插入两份 <style></style> 标签，破坏 specificity，还可能触发热更新失效或 SSR/CSR 样式不一致。
- 只在根布局（
_app.js或layout.tsx）里 import 一次，其他任何地方都别写import '../styles/globals.css' - 别在
pages/index.js、app/page.tsx或某个组件里再 import 同一个文件 - 检查 DevTools 的
，如果看到同名 CSS 被加载两次（比如globals-abc123.css和globals-def456.css），大概率是 Next.js 版本问题，升级到next@14.2.x或更高可解决
CSS Modules 和全局样式要分开用
全局 CSS 适合重置、字体、主题色这些影响全站的规则；组件级样式该用 .module.css。两者不冲突，但不能混用逻辑。
- 组件内 import
./Button.module.css→ 类名自动哈希，作用域隔离 - 根布局 import
../styles/globals.css→ 所有页面都能用.container、body等通用类 - 千万别在
_app.js里 import./Button.module.css—— 模块化 CSS 只能局部使用，全局 import 会报错
_app.js 不仅无效，还会干扰构建；而 Pages Router 下，哪怕只多一个空行，也会让全局样式彻底消失。路径、时机、命名，三者错一个，就白调半天。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
