在 _app.js 中必须将全局 css 的 import 写在文件最顶部（首行）、无条件、静态导入，且该 css 文件需为纯全局样式（非 css modules/sass），否则会因 ssr 样式收集机制失败而报错。
在 _app.js 中 import 全局 CSS 会报错：Global CSS cannot be imported from files other than your Custom <_app></_app>
Next.js 默认禁止从非 _app.js（或 _app.tsx）的页面/组件中 import 全局样式，但反过来——在 _app.js 里 import 全局 CSS ——是允许的，**前提是它必须是第一个 import，且不能带条件、动态逻辑或模块作用域外的副作用**。很多人报这个错，其实是 import 位置不对，或者混用了 CSS Modules / Sass 等非全局语法。
-
import '../styles/globals.css'必须写在_app.js文件最顶部（在任何import React或组件定义之前） - 确保该 CSS 文件里**没有
:global包裹，也不含module后缀，且未被css-loader配置为模块化处理 - 如果用了 Tailwind，
@tailwind base、@tailwind components、@tailwind utilities必须都在这个全局 CSS 里，不能拆开 import 到其他地方 - 不要在
getInitialProps或函数体内 import —— Next.js 只认顶层静态 import
为什么 import 放在 App 组件内部会失败
Next.js 的服务端渲染（SSR）阶段需要提前收集全局样式以注入 ，而组件内部的 import（比如在 return 前或 useEffect 里）属于运行时行为，无法被 Webpack/Next 编译期识别为“全局依赖”。这和 React Server Components 的限制无关，是构建时样式收集机制决定的。
- ❌ 错误写法：
function MyApp({ Component, pageProps }) {<br> import '../styles/globals.css'; // 运行时报错：Cannot use import statement outside a module<br> return <component></component>;<br>} - ✅ 正确写法：
import '../styles/globals.css'; // 顶层，无条件，无包裹<br><br>function MyApp({ Component, pageProps }) {<br> return <component></component>;<br>export default MyApp;
使用 next.config.js 启用 CSS 支持不是必须的，但要注意配置冲突
Next.js 13+ 默认支持 .css，无需额外配置；但如果你手动加了 cssModules: true 或自定义了 postcss，可能让全局 CSS 被误判为模块。尤其注意：next.config.js 中的 experimental.cssImportSupport 已废弃，启用它反而会导致全局 import 失效。
- 检查是否意外启用了
cssModules: { auto: true }—— 它会让所有.css文件默认走模块化，包括globals.css - 若项目同时用 SCSS，确保
globals.scss没被sassOptions里的additionalData注入了局部变量，否则会被视为有依赖而拒绝全局注册 - 开发时热更新偶尔不触发全局样式重载，可试
touch styles/globals.css强制刷新
多个全局 CSS 文件怎么安全引入
可以 import 多个，但顺序重要：它们会按 import 顺序拼接进 ，后面的规则会覆盖前面的。比如重置样式要放在最前，主题变量次之，工具类最后。
- ✅ 推荐顺序：
import '../styles/reset.css';<br>import '../styles/variables.css';<br>import '../styles/tailwind.css';<br>import '../styles/custom.css';
- ⚠️ 注意：不要用
dynamic import()或require()，它们不会被 SSR 收集 - 如果某 CSS 仅用于特定环境（如只在浏览器生效），应改用
useEffect + insertRule或内联 style，而非塞进全局链
import 锁死在 _app.js 顶部一行，并定期检查 next.config.js 是否悄悄改了 CSS 行为，比事后调试样式优先级更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
