next.js 13+ 原生支持 .module.scss，无需额外配置；错误使用旧插件或 next.config.js 中的过时配置会导致样式失效、无作用域或构建失败。
Next.js 13+ 默认支持 .module.scss，无需额外配置
Next.js 自 v13 起已原生支持 CSS Modules，包括 .module.scss 和 .module.sass 文件，只要文件名符合 *.module.scss 规范，就能直接 import 并获得作用域类名映射。不需要安装 node-sass、@zeit/next-sass 等旧插件，也不需要在 next.config.js 中写 webpack override 或调用 withSass。
常见错误是沿用 Next.js 12 及更早的配置思路，手动引入过时的插件包——这反而会破坏默认行为，导致样式不哈希、无作用域，甚至构建失败。
- ✅ 正确做法：直接创建
Button.module.scss，然后import styles from './Button.module.scss' - ❌ 错误做法：npm install
@zeit/next-sass+ 修改next.config.js，或在next.config.js中显式设置cssModules: true - ⚠️ 注意：
.scss（无module）文件不能在组件内 import，只允许在app/layout.tsx中全局导入
.module.scss 的命名与引用必须严格匹配
SCSS 中定义的类名（如 .toolbar-container）会被 Next.js 自动转换为驼峰式属性名（styles.toolbarContainer），但这个转换仅在类名合法且无歧义时生效。如果写成 styles.toolbar-container，JS 会报语法错误（- 被解析为减号）；如果拼写不一致（比如 SCSS 里是 .tool-bar，JS 里写 styles.toolbar），结果就是 undefined。
- SCSS 文件中类名必须用连字符分隔，例如：
.form-control-group、.btn-primary - TS/JS 中必须用驼峰式访问：
styles.formControlGroup、styles.btnPrimary - 不要试图用方括号动态访问：
styles['form-control-group']在类型检查下不可靠，且失去自动补全 - 嵌套规则不影响类名生成，只影响最终 CSS 输出；
.btn { &--large { ... } }仍需按styles.btnLarge访问
Storybook 中 .module.scss 同样开箱即用
如果你在用 @storybook/nextjs，那么 .module.scss 不仅在 Next.js 应用中工作，在 Storybook 预览环境中也完全可用，无需任何 loader 配置或 main.ts 覆盖。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
这是因为 Storybook 的 Next.js 框架内部复用了 Next.js 自身的 webpack 规则（见 @storybook/nextjs/dist/frameworks/nextjs/css/webpack.ts），对 .module.scss 的处理逻辑与 Next.js 构建过程一致。
- ✅ 示例写法：
import styles from './Card.module.scss'; return <div classname="{styles.cardWrapper}">...</div>; - ⚠️ 注意：Storybook 不支持
.scss（非 module）在 stories 中直接 import，和 Next.js 行为一致 - ? 如果你看到样式丢失，优先检查是否误用了
.scss后缀而非.module.scss
遇到 ReferenceError: require is not defined 怎么办
这个错误通常出现在你误装了旧版 @zeit/next-sass 或 next-sass，它们依赖 Node.js 的 require，而 App Router 环境（尤其是 Server Components）运行在 ESM 模式下，不支持 require。
- 立即执行：
npm rm @zeit/next-sass next-sass node-sass sass-loader - 删掉
next.config.js中所有与withSass、withCSS相关的代码 - 确认
next.config.js里没有cssModules: true或自定义webpack的module.rules针对 scss - 重启 dev server：Next.js 默认配置会接管所有
*.module.scss文件，并交由postcss+css-loader+sass（内置）处理
真正容易被忽略的是：哪怕你没主动 import 任何 scss 相关插件，只要 next.config.js 里残留了旧式配置，就可能触发降级行为，让 .module.scss 被当成普通 CSS 处理——类名不哈希、无作用域、无法热更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
