React导入Sidebar组件报错Module not found无法解析.Sidebar.css怎么办？

该报错与App.js中的Sidebar组件导入逻辑无关，触发源为./src/components/sidebar/Sidebar组件文件内部的样式导入配置错误，共两种常见可能：

• 导入路径拼写错误：你在Sidebar组件中引入样式时漏写了路径斜杠，将./Sidebar.css错写为.Sidebar.css，缺失代表当前目录的./标识导致构建工具无法识别路径
• 目标文件不存在或大小写不匹配：你在Sidebar组件中写了导入Sidebar.css的语句，但sidebar文件夹下未创建该文件，或是实际文件名大小写与导入语句不匹配（如实际文件为sidebar.css小写首字母，部分构建工具会强校验文件名大小写）

按以下步骤排查修复即可：

1. 打开./src/components/sidebar/Sidebar.js（或.jsx后缀）文件，定位到导入CSS的代码行
2. 若为路径拼写错误：将错误的import '.Sidebar.css'修改为import './Sidebar.css'
3. 若为文件缺失/大小写不匹配：
   • 不需要自定义侧边栏样式的话，直接删除Sidebar组件中导入Sidebar.css的代码行即可
   • 需要样式的话，在sidebar文件夹下创建与导入语句大小写完全一致的Sidebar.css文件
4. 保存所有修改后重启项目开发服务，报错即可解决

内容的提问来源于stack exchange，提问作者Abdur Rehman Khalid