Next.js中SCSS未被处理是因loader未接入、sideEffects误删或导入位置错误：需在next.config.js中显式配置webpack rules引入sass-loader，设置sideEffects保留.scss文件，并确保在app/layout.tsx中导入全局样式。
SCSS文件没被 Webpack 处理，构建时直接跳过
Next.js 默认不支持 .scss 或 .sass，不像 CSS Modules 那样开箱即用。它不会报错，也不会生成对应 CSS 文件——你检查 dist 目录，根本找不到任何由 SCSS 编译出的 CSS 资源。这不是路径或 import 写错了，是整个 loader 链路压根没接入。
- 运行
next build --debug，日志里没有Compiling with sass或类似提示 → 说明sass-loader没生效 - 确认
next.config.js是导出 plain object（不是函数），且已正确集成插件 - Next.js 14+ 内置 Webpack 5，必须用
sass-loader@11+；sass-loader@10会静默失败
next.config.js 配置漏了 webpack rule 或插件用错
App Router 下不能靠 module.exports = { sassOptions: {...} } 就完事。这个配置只影响内置 CSS 处理器，对 SCSS 完全无效。必须显式注入 webpack 规则或使用兼容插件。
- 推荐方式：安装
sass+sass-loader，再在next.config.js中添加 rule：
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /\.(scss|sass)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
})
return config
}
}
@zeit/next-sass 或旧版插件 → 删掉，它们不支持 Webpack 5 和 App Routercss-loader 的 modules: true 和全局 SCSS；模块化要用 xxx.module.scss，否则类名冲突或未作用域化全局 SCSS 没在 layout.tsx 中导入，SSR 时样式未注入
在 App Router 中，只有 layout.tsx（或 globals.css 同级）中 import 的样式，才能保证服务端渲染时注入 <head>。放在 page.tsx、组件内部或 app/layout.tsx 外部的 import，会导致 hydration 前无样式，出现闪烁甚至丢失。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- ✅ 正确位置：
app/layout.tsx顶部直接import '../styles/globals.scss' - ❌ 错误位置：写在
app/page.tsx里、或封装成 hook 在组件里import - 如果你用了 CSS-in-JS 库（如 Emotion），确保它也配置了 SSR 支持，否则同样只在客户端生效
package.json 的 sideEffects 字段把 SCSS 当“无副作用”删掉了
Webpack 的 tree shaking 机制会依据 package.json 中的 sideEffects 字段判断哪些文件可以安全删除。如果设为 false 或没包含 .scss，整个 SCSS 文件可能被当成死代码剔除，连带编译步骤都被跳过。
立即学习“前端免费学习笔记（深入）”；
- 检查
package.json中是否写了："sideEffects": false - 改成数组形式，显式保留样式文件：
"sideEffects": ["*.css", "*.scss", "*.sass"] - 注意：这个字段影响的是构建时的模块引入链，不是运行时行为；改完必须重新
next build
sideEffects 拦截、或导入位置不对这三处。其中 sideEffects 最隐蔽——开发环境一切正常，一到生产就消失，而且控制台和构建日志都不报错。 
