解决 Mac 系统（尤其是 M1/M2）上的 node-sass 问题
问题描述
在 Mac 系统上使用 node-sass 时，经常会遇到以下错误：
Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (108)
或者：
Node Sass could not find a binding for your current environment: Darwin 64-bit with Node.js X.X.X
这些问题在 M1/M2 芯片的 Mac 设备上尤为常见，主要原因包括：
- node-sass 与 Node.js 版本不兼容
- Apple Silicon 架构的兼容性问题
- 二进制文件绑定失败
解决方案
方案一：迁移到 Dart Sass（强烈推荐）
node-sass 已被官方废弃，推荐迁移到 Dart Sass。
# 1. 卸载 node-sass
npm uninstall node-sass# 2. 安装 sass (dart-sass)
npm install -D sass
更新 package.json：
{"dependencies": {"sass": "^1.69.5"},"scripts": {"sass": "sass src/styles:dist/styles","sass:watch": "sass --watch src/styles:dist/styles"}
}
方案二：使用特定版本的 node-sass
如果必须使用 node-sass，请确保使用正确的版本：
| Node.js 版本 | node-sass 版本 |
|---|---|
| Node 20 | 9.0.0 |
| Node 18 | 8.0.0 |
| Node 16 | 7.0.0 |
| Node 14 | 6.0.0 |
# 安装特定版本
npm install node-sass@7.0.0 --save-dev
方案三：重新构建 node-sass
# 清除 npm 缓存
npm cache clean -f# 删除 node_modules
rm -rf node_modules package-lock.json# 重新安装依赖
npm install# 重新构建 node-sass
npm rebuild node-sass
方案四：使用 nvm 管理 Node.js 版本
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash# 安装并使用特定版本的 Node.js
nvm install 16
nvm use 16# 然后重新安装项目依赖
npm install
最佳实践建议
1. 新项目配置
对于新项目，直接使用 Dart Sass：
{"devDependencies": {"sass": "^1.69.5"}
}
2. Webpack 配置
// webpack.config.js
module.exports = {module: {rules: [{test: /\.scss$/,use: ['style-loader','css-loader','sass-loader' // 会自动使用已安装的 sass 包]}]}
}
3. Vue CLI 项目配置
// vue.config.js
module.exports = {css: {loaderOptions: {sass: {implementation: require('sass')}}}
}
常见问题解答
Q1: 迁移到 Dart Sass 后需要修改现有代码吗？
A1: 大多数情况下不需要。Dart Sass 完全兼容 node-sass 的语法。
Q2: 性能会受影响吗？
A2: Dart Sass 通常比 node-sass 性能更好，尤其在 M1/M2 芯片上。
Q3: 如何处理旧项目的依赖？
A3: 建议逐步迁移到 Dart Sass，可以先在新功能中使用，然后逐步替换。
预防措施
- 在项目初始化时就使用 Dart Sass
- 在 package.json 中锁定依赖版本
- 使用 .nvmrc 文件指定 Node.js 版本
- 定期更新依赖包
结论
- 优先选择 Dart Sass，避免使用 node-sass
- 如果必须使用 node-sass，确保版本兼容性
- 保持依赖包更新
- 使用版本管理工具处理 Node.js 版本
参考资源
- Sass 官方文档
- node-sass 仓库
- Dart Sass 仓库
