Turbopack不支持直接编译SCSS，因其处于alpha阶段且禁用所有自定义loader与插件，仅原生支持标准CSS、postcss-nested和@import；对$variables、@use、@mixin等SCSS语法完全无法识别，必须通过Dart Sass CLI预编译为CSS后接入。
为什么Turbopack不支持直接编译SCSS
Turbopack当前（2026年）仍处于alpha阶段，不支持任何自定义loader或插件配置，包括sass-loader、dart-sass集成或postcss-sass等。它只原生支持postcss-nested和@import，但对@use、$variables、@mixin、@extend等SCSS语法完全无法识别。尝试在.scss文件里写$color: red;，Turbopack会直接报错Unexpected token "$"。
- 不是配置没写对——是根本没入口让你配
- 不是版本太低——是设计上就禁用所有预处理器扩展能力
- 官方明确说明：“CSS support is limited to standard CSS + postcss-nested + @import”
正确做法：把SCSS提前编译成标准CSS再交给Turbopack
必须在Turbopack构建链路之外完成SCSS → CSS转换，否则项目起不来。关键不是“怎么让Turbopack编译SCSS”，而是“怎么让它完全看不见SCSS”。
- 用Dart Sass CLI做预编译：
sass src/styles/main.scss dist/styles/main.css --style=compressed --source-map=false - 在
package.json的build脚本中前置执行："build": "sass src/styles/:dist/styles/ --no-source-map && turbopack build" - 所有
@import路径必须指向.css文件，例如@import "./base.css";，不能留.scss后缀 - 若依赖Bootstrap等库，先用
sassCLI完整编译出bootstrap.css，再@import该CSS文件
SCSS变量和主题如何不丢失语义
SCSS变量本身无法在Turbopack中存活，但你可以保留设计系统语义——前提是放弃“运行时编译”，改用“编译时生成+运行时CSS变量驱动”。
- 在
_tokens.scss里定义$primary: #007bff;，最终输出为:root { --primary: #007bff; } - 组件样式全部用
color: var(--primary);，禁止出现color: $primary; - 深色模式另建
theme-dark.css，覆盖同一组--primary等变量，JS切换document.documentElement.classList.toggle("dark") - 别用
!default——Turbopack不解析SCSS，!default毫无意义；所有变量赋值必须显式、无条件
常见错误与绕过陷阱
很多团队卡在“以为能配loader”，结果浪费半天调试turbopack.config.js（这文件根本不存在）或硬塞postcss-sass插件，反而触发更隐蔽的解析失败。
立即学习“前端免费学习笔记（深入）”；
-
npm install sass-loader→ 完全无效，Turbopack忽略所有node_modules里的loader -
@use "vars" as v→ 语法报错，Turbopack不识别@use，连vars.scss都加载不了 - 把
.scss改名成.css然后写SCSS语法 → 浏览器原生报错，Turbopack不转译，直接透传 - 试图用
postcss-import替代@import→ 不行，Turbopack只认字面量@import "x.css"，不走PostCSS插件链
