必须在 _app.tsx（或 _app.js）中顶层静态导入全局 CSS，因 Next.js 的 CSS 隔离机制要求全局样式由框架统一注入 <head>，而 _app 是唯一确保执行早于所有页面且避免重复注入的位置；其他位置导入会触发构建报错或样式丢失。
必须在 _app.tsx（或 _app.js）中导入，且不能用 import 语句加载到页面组件或布局组件里——否则会触发 CSS 模块冲突或构建报错。
为什么只能在 _app 里引入全局 CSS？
Next.js 的 CSS 隔离机制默认禁止跨组件共享样式作用域。全局 CSS（如 globals.css）需由框架统一注入 <head>，而 _app 是唯一能保证执行时机早于所有页面、且不被 SSR/SSG 多次重复注入的位置。
- 在
pages/index.tsx中import '../styles/globals.css'→ 构建时报Global CSS cannot be imported from files other than your Custom <code>_app - 用
styled-jsx或className加载的局部样式不受此限，但它们不是全局 CSS - 使用
css-loader自定义配置可绕过限制，但破坏 Next.js 默认行为，不推荐
如何正确导入并避免重复打包？
确保路径准确、无条件导入、不包裹在函数或条件逻辑中：
import '../styles/globals.css'; // ✅ 正确：顶层、无条件、相对路径
<p>function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}</p><p>export default MyApp;立即学习“前端免费学习笔记（深入）”；
- 路径必须相对于
_app文件，比如../styles/globals.css，不是/styles/globals.css（绝对路径会被当成模块解析失败） - 不要写成
if (process.browser) { import('../styles/globals.css') }→ 动态导入无法生成<link rel="stylesheet">标签 - 多个全局 CSS 文件按顺序导入，后者可覆盖前者（如先
reset.css再globals.css）
如果用了 Tailwind 或 PostCSS 怎么办？
Tailwind 的 @tailwind base、@tailwind components、@tailwind utilities 必须放在同一个 CSS 文件中（通常是 globals.css），且该文件仍需在 _app 中导入：
@tailwind base;
@tailwind components;
@tailwind utilities;
<p>/<em> 其他自定义全局样式 </em>/
body {
font-family: system-ui, sans-serif;
}- 不要把
@tailwind指令拆到不同文件再分别导入，PostCSS 无法跨文件解析依赖 - 若启用
darkMode: 'class'，需手动在<html>上加class="dark"才生效，Next.js 不自动处理 - 使用
postcss-import插件时，确保@import语句也在globals.css顶层，而非嵌套在@layer内
最常被忽略的是：开发时样式看似生效，但构建后 next export 或静态导出时丢失全局 CSS——这往往是因为误将 import 写在了 getStaticProps 里，或者用了动态 require()。全局样式只认 _app 文件顶层的静态 import 语句。
