如何在Next.js框架中引入全局CSS_在_app.js入口文件中导入样式-css教程-PHP中文网

next.js 13+ app router 下不能在 _app.js 导入全局 css，因其已弃用 _app.js；全局样式须在 app/layout.tsx 顶层导入，而 pages router 才需且必须在 pages/_app.js 中导入。

如何在next.js框架中引入全局css_在_app.js入口文件中导入样式

为什么不能在 `_app.js` 里直接 `import 'styles/global.css'`

Next.js 13+（App Router）默认不支持在 _app.js 中直接导入 CSS 文件——它会报错 Global CSS cannot be imported from files other than your Custom <code>_app.js。但注意：这个错误只在 App Router 下出现；如果你用的是 Pages Router（即项目里还有 pages/ 目录、且 _app.js 存在于该目录下），那反而**必须**在 _app.js 导入全局样式，否则样式不会生效。

关键判断点：先确认你用的是 Pages Router 还是 App Router。

Pages Router：有 pages/_app.js，无 app/ 目录，或 app/ 目录未启用
App Router：有 app/layout.js 或 app/layout.tsx，且 next.config.js 没禁用 App Router

Pages Router 下正确引入全局 CSS 的方式

必须在 pages/_app.js 的顶层作用域导入，且只能导入一次。不能放在组件内部、useEffect 里，也不能分散在多个文件中导入同一份 CSS。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

✅ 正确写法：

import '../styles/global.css';
<p>function MyApp({ Component, pageProps }) {
return <component></component>;
}
export default MyApp;</p>

❌ 错误写法：import('./styles/global.css')（动态导入不触发全局样式注入）
❌ 错误写法：在 pages/index.js 里也 import '../styles/global.css'（会触发重复注入警告甚至样式冲突）
⚠️ 注意：global.css 里不能包含 @layer 或 @tailwind 等需要 PostCSS 处理的指令，除非你已配好 postcss.config.js

App Router 下全局样式该放哪？不是 `_app.js`

App Router 没有 _app.js 的概念——它用 app/layout.js 作为根布局。全局 CSS 必须在这里导入，且必须是**客户端组件**（加 'use client' 不必要，但不能是服务端组件的副作用）。

✅ 正确路径：app/layout.js（或 .tsx），顶层 import：

import '../styles/global.css';
<p>export default function RootLayout({ children }) {
return (</p>{children}
  );
}

⚠️ 如果你混用了 Pages Router 和 App Router（比如同时有 pages/ 和 app/），全局样式需按路由类型分别处理：Pages 页面走 pages/_app.js，App 页面走 app/layout.js
⚠️ app/layout.js 中的 CSS 导入只影响 App Router 路由；Pages Router 页面仍需自己的 _app.js 来加载样式

遇到 `Cannot find module 'xxx.css'` 怎么办

这通常不是路径问题，而是模块解析缺失。Next.js 默认支持 CSS/Sass/PostCSS，但如果你删了 next.config.js 或改过 webpack 配置，可能关掉了 CSS 支持。

检查 next.config.js 是否意外添加了 webpack: (config) => { /* 删除了 css rule */ }
确保 styles/ 在 src/ 下？如果是，路径应为 src/styles/global.css，导入时写 import 'src/styles/global.css'（注意：不能用 ../ 跳出 src，Next.js 默认只允许从 src 或项目根开始解析）
如果用了 TypeScript，确认 next-env.d.ts 里有 /// <reference types="next/image"></reference>，但不需要额外声明 CSS 模块（Next.js 内置支持）
重启开发服务器：CSS 支持是启动时决定的，改配置后必须 ctrl+C → npm run dev