解决 Mac 系统上的 node-sass 问题

解决 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 [email protected] --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，可以先在新功能中使用，然后逐步替换。