macOS11.4下Node16+Webpack4+Vue2项目用yarn安装node-sass失败如何解决

node-sass与Node.js版本存在强绑定规则，node-sass@4.x最高仅支持Node.js 14.x版本，你当前使用的Node 16.4.0超出兼容范围，导致本地编译libsass依赖失败，抛出gyp构建错误。若macOS系统未正确安装Xcode命令行工具，也会触发编译类报错。

方案一：保留node-sass，安装匹配版本 #

• 清理原有安装缓存和无效依赖

yarn cache clean node-sass sass-loader
rm -rf node_modules yarn.lock

• 安装Node16兼容的node-sass版本，同时匹配webpack4的sass-loader版本要求（sass-loader@11及以上仅支持webpack5）

yarn add node-sass@6 sass-loader@10 -D

• 如果仍报编译错误，先安装Xcode命令行工具后再重试安装

xcode-select --install

方案二（更推荐）：替换为官方推荐的dart-sass #

node-sass已于2020年官方宣布弃用，不再维护更新，dart-sass是官方指定的替代实现，不需要本地编译二进制文件，无系统环境和Node版本兼容问题，完全兼容现有sass语法、vue2生态以及element-ui样式规则。
操作步骤如下：

• 卸载原有node-sass并清理缓存

yarn remove node-sass
yarn cache clean node-sass sass-loader
rm -rf node_modules yarn.lock

• 安装dart-sass和适配webpack4的sass-loader

yarn add sass@1 sass-loader@10 -D

提示：dart-sass的npm包名为sass，安装完成后不需要修改项目中已有的sass相关代码，直接启动项目即可正常运行。

内容的提问来源于stack exchange，提问作者user13663861