React Bootstrap中Sass安装异常，仍提示安装已废弃的node-sass

核心排查与解决步骤 #

• 确认安装的是**sass**包而非废弃的node-sass：目前官方推荐使用dart-sass（npm包名为sass），先执行命令检查已安装的包：

  npm list sass
  

  若输出无sass，重新安装：

  npm install sass --save-dev
  

• 修正React Bootstrap的引入方式：自定义主题必须导入scss源文件，而非编译好的css文件。在全局样式文件中按以下方式编写：

  // 先定义自定义变量（覆盖默认主题值）
  $primary: #你的自定义颜色值;
  // 再导入React Bootstrap的scss核心文件
  @import "~react-bootstrap/scss/bootstrap.scss";
  

  若导入的是react-bootstrap/dist/react-bootstrap.min.css这类css文件，会跳过scss编译流程，进而触发依赖识别错误。

• 升级react-scripts版本：旧版（4.x及以下）create-react-app默认依赖node-sass，升级到5.x+版本即可支持sass替代：

  npm install react-scripts@latest --save
  

• 清理缓存重新构建：缓存可能导致依赖识别异常，执行以下命令重置：

  rm -rf node_modules package-lock.json
  npm install
  npm start
  

额外检查 #

执行npm ls node-sass查看项目中是否有其他依赖强制要求node-sass，若有则升级对应依赖包至兼容sass的版本。

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