React项目中此前运行正常的Sass突然失效，CSS可正常使用是什么原因？

故障原因及解决办法 #

1. 核心问题：依赖版本不兼容 #

你使用的react-scripts@1.1.5是2018年发布的老旧版本，对高版本node-sass、sass-loader的支持存在天生缺陷。之前可正常运行多是因为依赖锁文件（package-lock.json/yarn.lock）未发生变更、本地Node版本匹配，近期如果有重装依赖、升级Node、修改lock文件的操作，就会触发兼容问题导致Sass编译失效。
解决步骤：

• 先删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件
• 方案一（适配旧版react-scripts）：将依赖降级到兼容版本
  修改package.json中的对应依赖版本后重装即可：

  "node-sass": "^4.14.1",
  "sass-loader": "^7.3.1",
  

• 方案二（推荐，适配现有sass依赖）：升级react-scripts到稳定高版本
  执行以下命令升级：

  npm install react-scripts@4.0.3 --save
  

2. 补充排查点 #

如果调整版本后仍未恢复，按以下顺序排查：

• 检查所有Sass文件后缀是否为.scss/.sass，引入路径的大小写、相对路径是否正确，是否误将引入路径写为.css后缀
• 检查本地Node版本是否在近期升级：node-sass@6仅支持Node 14~16版本，如果Node版本已升到17+，要么降级Node到16.x稳定版，要么将node-sass替换为官方现在推荐的sass（dart-sass，无Node版本绑定兼容性更好）
• 如果项目之前执行过eject操作，检查webpack配置中sass-loader的相关规则是否被误修改；未eject的项目直接重装依赖即可修复本地依赖损坏的问题

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