如何在Next.js中引入全局CSS样式_在_app.js中进行import导入-css教程-PHP中文网

只能在 _app.js 中导入全局 css，因为 next.js 要求全局样式统一注入以避免重复加载和顺序冲突；必须顶层静态导入纯 css 文件，路径需正确，不可混用 css modules 或动态导入。

如何在next.js中引入全局css样式_在_app.js中进行import导入

在 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></style> 标签与客户端一致
任何其他位置的全局 CSS import 都会被 Webpack 插件拦截并抛出明确错误

正确写法：只在 `_app.js` 顶部 import 一次

确保路径正确、无条件逻辑、不包裹在函数或 useEffect 中：

律社

律社是一款面向法律从业者的AI法律工作台。

下载

import '../styles/global.css'; // ✅ 正确：顶层、静态、绝对路径（从项目根开始）

function MyApp({ Component, pageProps }) {
  return <component></component>;
}

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。