React项目迁移后SASS无法编译，样式失效求助

核心排查方向与解决方案 #

1. 清理依赖缓存并重装 #

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

2. 匹配Node.js与node-sass版本 #

你的node-sass@4.12.0仅兼容Node.js 8.x/10.x/12.x/13.x，如果当前电脑Node版本过高（如16+）会导致编译失败：

• 使用版本管理工具（如nvm）切换兼容版本：

  nvm install 12.22.12
  nvm use 12.22.12
  

• 切换完成后重复步骤1重新安装依赖

3. 移除冲突的SASS依赖包 #

你的package.json同时存在node-sass和sass（dart-sass），二者会导致编译冲突，建议弃用已废弃的node-sass：

• 卸载node-sass：npm uninstall node-sass
• 安装与react-scripts@4.0.3兼容的sass和sass-loader版本：

  npm install sass@~1.49.0 sass-loader@^8.0.2 --save-dev
  

• 重启项目：npm start

4. 检查SASS文件引入方式 #

确保组件中正确引入.scss文件，例如：

import './ComponentStyles.scss';

同时验证文件路径是否正确，避免因路径错误导致样式未被编译。

5. 恢复react-scripts默认配置（若已执行eject） #

如果之前执行过npm eject并修改了webpack.config.dev.js，可能破坏了默认的SASS编译规则：

• 若未备份配置，可尝试从同版本的Create React App项目中拷贝默认的webpack配置覆盖现有文件
• 或重新初始化一个react-scripts@4.0.3的项目，对比配置差异修复问题

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