如何在Turbopack项目中极速编译大型SCSS项目为CSS-css教程-PHP中文网

Turbopack不支持直接编译SCSS，因其处于alpha阶段且禁用所有自定义loader与插件，仅原生支持标准CSS、postcss-nested和@import；对$variables、@use、@mixin等SCSS语法完全无法识别，必须通过Dart Sass CLI预编译为CSS后接入。

如何在turbopack项目中极速编译大型scss项目为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等库，先用sass CLI完整编译出bootstrap.css，再@import该CSS文件

SCSS变量和主题如何不丢失语义

SCSS变量本身无法在Turbopack中存活，但你可以保留设计系统语义——前提是放弃“运行时编译”，改用“编译时生成+运行时CSS变量驱动”。

CSS工具箱(专业版)

全功能 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插件链