React 18.2.0项目中SCSS样式无法生效问题求助

核心问题分析 #

• react-scripts版本过低：当前使用的react-scripts@1.1.5是多年前的旧版本，完全不兼容React 18，且对现代sass包的支持存在缺陷。
• 冗余无效依赖：安装的scss@0.2.4是占位性质的无效包，并非处理SCSS的工具，无需保留。

分步解决方案 #

1. 升级react-scripts到兼容版本 #

在项目根目录执行命令，将react-scripts升级至支持React 18的最新稳定版（5.x系列）：

npm install react-scripts@latest --save

若遇到依赖冲突，可尝试强制升级（操作前建议备份项目）：

npm install react-scripts@latest --save --force

2. 移除无效的scss依赖 #

执行命令删除无用的scss包：

npm uninstall scss --save-dev

3. 验证SCSS文件路径 #

确认导入的SCSS文件路径完全正确：

• 检查文件是否存在于指定位置：../../styles/components/navigation/Navbar.scss
• 可尝试使用基于src目录的相对路径避免层级错误，例如：

import '../styles/components/navigation/Navbar.scss';
// 若styles目录直接在src下，可简化为
import './styles/components/navigation/Navbar.scss';

4. 重启开发服务器 #

修改依赖配置后必须重启React开发服务器，确保新配置生效：

npm start

额外排查点 #

• 检查SCSS语法是否存在错误（如未闭合的括号、无效变量定义等），语法错误会导致样式编译失败。
• 若升级后仍有问题，可删除依赖缓存重新安装：

rm -rf node_modules package-lock.json
npm install

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