启动React应用时出现Node Sass版本不兼容错误，如何解决？

启动React应用执行npm start时，出现版本不兼容错误：

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.

解决方案 #

方案1：降级Node Sass到兼容版本 #

当前项目依赖的sass-loader仅支持^4.0.0范围的Node Sass，按以下步骤操作：

• 卸载现有Node Sass：

  npm uninstall node-sass
  

• 安装4.x稳定版（推荐4.14.1，该版本是4.x分支最后一个维护版）：

  npm install node-sass@4.14.1 --save-dev
  

• 重启项目：

  npm start
  

方案2：改用Dart Sass（推荐） #

Node Sass已被官方停止维护，Dart Sass（即sass包）是官方推荐的替代方案，语法完全兼容且维护活跃：

• 卸载Node Sass：

  npm uninstall node-sass
  

• 安装Dart Sass：

  npm install sass --save-dev
  

• 重启项目：

  npm start
  

可选：升级react-scripts #

如果项目使用的react-scripts版本较旧，导致依赖的sass-loader版本偏低，可尝试升级react-scripts到最新稳定版（升级前建议备份项目文件）：

npm install react-scripts@latest --save

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