Windows 11更新后npm install安装React项目报错求助

问题背景 #

刚部署Windows 11和Visual Studio 2022，在Windows 10上正常运行的React UI项目执行npm install时，node-sass构建失败。已安装Python2并配置环境变量，VS安装时勾选了「桌面开发」组件，但问题依旧。错误日志关键信息：

npm ERR! path D:\Projects\oprcfda\opr-cfda-website-main-ui\node_modules\node-sass
npm ERR! gyp verb find vs2017   - Missing Visual Studio C++ core features (Microsoft.VisualStudio.VC.MSBuild.Base)
npm ERR! gyp verb find vs2017   - Missing a Windows SDK (Microsoft.VisualStudio.Component.Windows10SDK.* or Microsoft.VisualStudio.Component.Windows81SDK)
npm ERR! File "C:\Users\tomrh\.node-gyp\18.17.0\include\node\common.gypi", line 1
npm ERR!     e_data_file_flag%': 1
npm ERR!                         ^
npm ERR! SyntaxError: EOL while scanning string literal
npm ERR! gyp ERR! configure error

解决方案 #

1. 补全VS2022必要组件 #

打开Visual Studio Installer，选择「修改」当前安装：

• 在「桌面应用和移动应用」分类下，确保「桌面开发」组件已勾选
• 展开「桌面开发」的可选组件，勾选：
  • C++核心功能（对应缺失的Microsoft.VisualStudio.VC.MSBuild.Base）
  • Windows 10 SDK（推荐选择与系统版本匹配的版本，如10.0.22621.x）
  • C++生成工具（包含MSVC编译器、构建工具链）
• 完成安装后重启电脑

2. 解决Node与node-sass兼容性问题 #

Node v18.17.0与旧版node-sass、node-gyp不兼容，推荐两种方案：

方案A：替换node-sass为dart-sass（推荐，长期维护）

node-sass已停止更新，dart-sass是官方替代方案：

1. 卸载旧依赖：

   npm uninstall node-sass
   

2. 安装dart-sass：

   npm install sass --save-dev
   

3. 清理缓存与依赖文件：

   rm -rf node_modules package-lock.json
   npm cache clean --force
   

4. 重新安装依赖：

   npm install
   

（React项目无需额外修改配置，工具链会自动识别sass）

方案B：降级Node版本到兼容版本

根据node-sass版本兼容表，Node v16.x LTS适配多数旧版node-sass：

1. 卸载当前Node v18.17.0
2. 安装Node v16.x LTS版本
3. 清理缓存与依赖文件后重新执行npm install

3. 配置node-gyp适配VS2022（可选，若用方案B需操作） #

1. 升级node-gyp到最新版本：

   npm install -g node-gyp@latest
   npm install node-gyp@latest --save-dev
   

2. 设置环境变量：
   • 添加系统变量GYP_MSVS_VERSION=2022，告知node-gyp使用VS2022构建
   • 确保Python2.7的路径在PATH环境变量最前端

内容的提问来源于stack exchange，提问作者T.Rhodes