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 规则或使用兼容插件。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• 推荐方式：安装 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 Router

别混用 css-loader 的 modules: true 和全局 SCSS；模块化要用 xxx.module.scss，否则类名冲突或未作用域化

全局 SCSS 没在 layout.tsx 中导入，SSR 时样式未注入

在 App Router 中，只有 layout.tsx（或 globals.css 同级）中 import 的样式，才能保证服务端渲染时注入 。放在 page.tsx、组件内部或 app/layout.tsx 外部的 import，会导致 hydration 前无样式，出现闪烁甚至丢失。

• ✅ 正确位置：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

SCSS 样式丢失最常卡在 loader 没挂上、sideEffects 拦截、或导入位置不对这三处。其中 sideEffects 最隐蔽——开发环境一切正常，一到生产就消失，而且控制台和构建日志都不报错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！