安装locomotive-scroll后React应用安装node-sass报ERR_SOCKET_TIMEOUT无法启动

首先明确两个核心问题：

1. node-sass早已停止官方维护，对新Node版本兼容性极差，且二进制文件下载经常因网络问题触发ERR_SOCKET_TIMEOUT错误
2. 报错的核心是locomotive-scroll的scss文件需要sass编译环境，无需强制安装已废弃的node-sass

步骤1：修复npm下载超时问题 #

先将npm源切换为国内镜像，解决网络超时问题：

npm config set registry https://registry.npmmirror.com

步骤2：安装官方推荐的sass替代包 #

react-scripts已经原生支持使用dart-sass（npm包名sass）作为node-sass的兼容替代，API完全一致无需修改业务代码：

npm install sass --save-dev

步骤3：验证修复效果 #

执行npm start即可正常启动项目。

可选轻量方案（无需安装sass依赖） #

如果你不需要修改locomotive-scroll的scss变量，可以直接引入编译完成的css文件，完全规避sass依赖要求：
将项目中引入locomotive-scroll样式的代码：

import 'locomotive-scroll/src/locomotive-scroll.scss'

替换为：

import 'locomotive-scroll/dist/locomotive-scroll.min.css'

修改后直接执行npm start即可运行，无需安装任何sass相关依赖。

异常排查 #

如果执行上述操作后仍有报错，执行以下操作重置依赖：

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 执行缓存清理命令：npm cache clean --force
• 重新安装依赖：npm install
• 再次运行npm start

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