使用SASS时Next.js项目加载停滞的问题求助

问题根源 #

你的问题本质是Node.js 14.x 在 arm64 架构的 Mac 上与当前版本的 Sass 存在兼容冲突：

• 你安装的 sass（dart-sass）高版本在Node14 arm64环境下，Next.js编译时会出现无响应的情况
• 手动执行node-sass报错是因为node-sass官方本身不支持「arm64 Mac + Node14」的组合

解决方案 #

方案1：降级Sass到兼容版本

dart-sass 1.54.0及以下版本在Node14 arm64环境下兼容性更稳定：

1. 卸载当前Sass：

npm uninstall sass --save-dev

2. 安装指定兼容版本：

npm install sass@1.54.0 --save-dev

3. 重启服务或执行构建：

npm run dev

方案2：通过Rosetta 2以x86架构运行终端

绕开arm64的兼容限制：

1. 打开访达，进入「应用程序/实用工具」，找到「终端」
2. 右键终端→「显示简介」，勾选「使用Rosetta打开」
3. 关闭现有终端，重新打开后进入项目目录，重置依赖：

rm -rf node_modules package-lock.json
npm install
npm run dev

方案3：应急使用node-sass兼容版本（不推荐长期用）

node-sass已停止维护，但可安装针对x64架构的预编译包应急：

1. 卸载当前Sass：

npm uninstall sass --save-dev

2. 安装指定版本的node-sass：

npm install node-sass@6.0.1 --save-dev --unsafe-perm --arch=x64

验证 #

完成上述任一操作后，重新在_app.tsx中导入globals.scss，检查npm run dev和npm run build是否正常执行。

内容的提问来源于stack exchange，提问作者Oscar Sales DEV