Next.js 13+ 中全局 SCSS 必须在 app/layout.tsx 静态导入，因 SSR 阶段需确定样式以避免水合不一致、FOUC；非 layout/page/template 文件中导入会触发构建错误，且 sassOptions 仅启用编译不控制加载时机。
Next.js 13+ 中，全局 SCSS 必须通过 app/layout.tsx 静态导入，不能按需加载；所谓“按需加载 CSS”仅适用于 CSS Modules（如 .module.scss），全局样式天生不支持动态或条件导入。
为什么 import './globals.scss' 只能在 app/layout.tsx 里写？
Next.js 的 App Router 对全局样式有硬性限制：任何非 layout.tsx、page.tsx 或 template.tsx 的顶层文件中 import 普通 .scss（无 module 后缀），都会触发构建错误：Global CSS cannot be imported from files other than your Custom _app.js（即使你用的是 App Router，错误信息仍沿用旧名）。
这不是 bug，而是设计约束——全局样式需在服务端渲染（SSR）阶段就确定，否则会导致水合（hydration）不一致、FOUC 或样式丢失。
- ✅ 正确位置：
app/layout.tsx顶部静态import './globals.scss' - ❌ 错误位置：组件内、
useEffect里、dynamic()包裹的模块、require('./globals.scss') - ⚠️ 注意：
globals.scss里不能@import其他普通.scss文件（除非它们也走全局路径且被 layout 导入）
sassOptions 是启用 SCSS 的必要开关，但只影响编译，不影响加载时机
Next.js 默认不处理 .scss 文件，必须显式启用。但启用后，它只决定“能不能编译”，不改变“何时/如何注入 CSS”。
立即学习“前端免费学习笔记（深入）”；
在 next.config.js 中加这段配置即可：
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
// 必须存在，哪怕为空对象，否则 .scss 文件会被完全忽略
},
};- 不需要安装
node-sass或@zeit/next-sass—— Next.js 13.4+ 内置 Dart Sass - 如果项目里已有
sass依赖（如"sass": "^1.70.0"），直接删掉所有旧插件和withSass()包装器，否则会冲突 -
sassOptions.includePaths是可选优化项，用于简化@import 'variables';路径，与全局加载无关
想“按需”？只能换方案：用 .module.scss + 动态组件
真正能实现“按需”的，是 CSS Modules，不是全局样式。比如一个 Modal 组件自带样式，只在打开时加载对应 CSS：
✅ 正确做法：
- 创建
components/Modal/Modal.module.scss - 在
Modal.tsx中import styles from './Modal.module.scss' - 配合
dynamic()或路由级懒加载，CSS 会随 JS chunk 一起分割、异步加载 - 类名自动作用域隔离，不会污染全局
❌ 不要试图绕过规则：把 .scss 放进 useEffect 用 insertRule 注入、或用 link 标签手动挂载——Next.js 的 SSR/SSG 流程无法感知这些，会导致首屏无样式、SEO 失效、Hydration mismatch。
常见错误现象与定位线索
遇到样式没生效，先看控制台和终端输出：
- 终端报
Module not found: Can't resolve './globals.scss'→ 没配sassOptions，或文件路径错 - 浏览器报
Global CSS cannot be imported from files other than...→ 在非 layout/page 文件里 import 了普通.scss - 样式生效但类名全漏出成全局（如
.btn直接生效）→ 误用了.scss而非.module.scss，或文件命名/导入方式不对 - 页面白屏 + 控制台无报错 →
sassOptions缺失导致 SCSS 文件被静默跳过，检查是否真有sassOptions: {}
全局 SCSS 的“按需”本质是个伪命题；真正可控的加载粒度，只存在于模块化路径下。别跟规则硬碰，用对地方比强行改造更省事。
