Next.js 13+ 默认不支持 SCSS，需在 next.config.js 中配置 sassOptions 启用；SCSS Modules 必须命名规范（如 Button.module.scss）且与组件同目录；全局样式仅通过 app/layout.tsx 顶层 import 生效。
Next.js 13+ 默认不支持 scss，必须手动配置 next.config.js
Next.js 13（App Router）默认只识别 css 和 css modules，scss、sass、module.scss 都会被直接忽略——连编译错误都不会报，页面就白屏或样式丢失。这不是 bug，是默认关闭的特性。
要启用，必须在 next.config.js 中显式添加 sass 支持：
/** @type {import('next').NextConfig} */
const nextConfig = {
sassOptions: {
// 启用模块化解析（关键！否则 .module.scss 不生效）
includePaths: ['./styles'],
},
};
module.exports = nextConfig;
- 不写
sassOptions→@import失败、global.scss能用但Button.module.scss会报Module not found -
includePaths不是必需项，但加了能避免写一长串../../../styles/variables，推荐配 - 无需安装
sass或node-sass：Next.js 13.4+ 内置dart-sass，只要package.json里有"sass": "^1.70.0"就行（npm install sass即可）
Button.module.scss 要和 Button.tsx 同名同目录才自动绑定
Next.js 的 CSS Modules 绑定逻辑很“机械”：它只认 [name].module.[css|scss|sass] 这种命名，并且只在 import 时做静态分析。不是靠文件夹结构或配置推断。
正确写法：
// components/Button/Button.tsx
import styles from './Button.module.scss';
<p>export default function Button() {
return <button classname="{styles.primary}">Click</button>;
}</p>
/* components/Button/Button.module.scss */
.primary {
background: blue;
color: white;
}
- 写成
Button.scss→ 不是 module，全局污染，且 class 名不会哈希 - 写成
button.module.scss（小写）→ Next.js 不识别，styles是空对象 - 写成
Button.module.scss但放在styles/下 →import路径必须同步改，否则找不到 - 动态拼接 class 名（如
className={`${styles.primary} ${otherClass}`）→ 会破坏 CSS Modules 的作用域隔离，慎用
全局 SCSS（如 globals.scss）必须用 import 在 app/layout.tsx 顶层
Next.js App Router 中，只有 app/layout.tsx（或 app/layout.js）的顶层 import 才会被当作全局样式注入。其他地方 import 的 .scss 文件，哪怕没带 module，也会被当成模块处理（class 名哈希 + 局部作用域）。
所以：
// app/layout.tsx
import './globals.scss'; // ✅ 正确：全局生效
<p>export default function RootLayout({ children }) {
return (
</p>{children}
);
}
- 在
page.tsx里import '../styles/globals.scss'→ 样式只在该路由生效，刷新后可能闪一下再加载，且无法覆盖layout级别的重置样式 -
globals.scss里用@use 'variables'→ 必须确保variables.scss在sassOptions.includePaths范围内，否则报Can't find stylesheet - 想用 CSS 自定义属性（
--color-primary）？直接写进globals.scss的:root即可，不需要额外 loader
构建后 CSS 输出路径不可控，但可通过 output 配置影响 chunk 命名
Next.js 不暴露 mini-css-extract-plugin 的底层配置，所以你不能像 Webpack 那样指定 filename: 'css/[name].[contenthash].css'。所有 CSS 最终都会被打包进 _next/static/css/ 下的 hash 文件中，名字由 Webpack 自动生成。
- 开发时看到的
Button.module.scss对应一个独立标签 → 这是 dev server 的 HMR 行为，和构建无关 - 生产构建后，所有 module scss 会合并进少数几个 CSS chunk（如
app/_next/static/css/abc123.css），不会按组件拆分 - 如果需要分离「关键 CSS」或「主题 CSS」，只能靠手动拆成不同
import链路，比如把深色模式变量单独 import 到layout.tsx顶层，Next.js 会把它打到另一个 CSS chunk 里 - 检查是否生效？运行
next build && next start，打开浏览器开发者工具 → Elements → 查看中的，路径含static/css/即正确
真正容易被忽略的是：SCSS 的 @import 和 @use 在 Next.js 里行为一致，但 @use 更安全（避免变量冲突），而 @import 已被 Sass 官方标记为 deprecated —— 别图省事继续用 @import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
