只能在 _app.js 中导入全局 CSS，因为 Next.js 要求全局样式统一注入以避免重复加载和顺序冲突；必须顶层静态导入纯 CSS 文件，路径需正确，不可混用 CSS Modules 或动态导入。
在 Next.js 中，_app.js 是唯一能安全导入全局 CSS 的地方——但必须是纯 CSS 文件（不含 @import、CSS-in-JS 或动态 import），且不能与页面级 CSS 模块（.module.css）混用，否则会触发构建错误或样式丢失。
为什么只能在 _app.js 里 import 全局 CSS
Next.js 要求所有全局样式必须在应用入口统一注入，避免多页面重复加载或顺序冲突。如果在某个 page 或 component 中直接 import 'styles/global.css'，开发时可能看似生效，但构建后会报错：Error: Global CSS cannot be imported from files other than your Custom <code>_app.js。
-
_app.js是每个页面共用的根组件，Next.js 专门为此预留了全局样式入口 - SSR 和 CSR 渲染都依赖这个统一注入点，保证服务端生成的
<style>标签与客户端一致 - 任何其他位置的全局 CSS import 都会被 Webpack 插件拦截并抛出明确错误
正确写法：只在 _app.js 顶部 import 一次
确保路径正确、无条件逻辑、不包裹在函数或 useEffect 中：
import '../styles/global.css'; // ✅ 正确：顶层、静态、绝对路径（从项目根开始）
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
- 路径必须以
../或/开头（如import '/styles/global.css'），不能是相对路径./styles/global.css（除非文件就在_app.js同级） - 不要用
dynamic(import(...))或require()加载，必须是静态 import - 如果用了 CSS 预处理器（如 Sass），需对应安装
sass并 import.scss文件，Next.js 默认支持
常见错误：混用 CSS Modules 或带 @import 的文件
下面这些都会导致构建失败：
立即学习“前端免费学习笔记（深入）”；
- 在
_app.js中 import 一个内部含@import 'reset.css';的 CSS 文件 —— Next.js 不解析嵌套@import，会忽略被引入的部分 - 把
global.css写成global.module.css并试图在_app.js中 import —— 模块化 CSS 只能用于组件局部，全局 import 会报 “Module parse failed” - 同时在
_app.js和某个pages/index.js中 import 同一个global.css—— 即使没报错，也会造成重复插入，影响 specificity 和性能
进阶注意：Tailwind 或 CSS-in-JS 的处理方式不同
Tailwind 不是“全局 CSS 文件”，它通过 PostCSS 插件注入，应放在 global.css 最顶部用 @tailwind base; 等指令；而像 styled-components 或 emotion 则需配置自定义 _document.js 或使用其 SSR API，不能靠 import 塞进 _app.js。
真正容易被忽略的是：即使你只 import 了一次，如果 global.css 里写了 body { margin: 0 } 这类重置规则，它会在所有页面生效，但无法被页面级组件的 style 属性覆盖（因为优先级低），调试时得查 computed styles 而不是元素上的内联 style。
