在React文件中导入bootstrap-dark-5后为何出现报错？

问题场景 #

在React项目的src/App.js中执行以下导入语句后编译报错：

import '../node_modules/bootstrap-dark-5/dist/css/bootsrap-dark-5.min.css';

报错信息：

Compiled with problems:X

ERROR in ./src/App.js 8:0-75

Module not found: Error: Can't resolve '../node_modules/bootstrap-dark-5/dist/css/bootsrap-dark-5.min.css' in 'C:\Users\ankan\Desktop\food app\zebrakat\khana\src'

排查解决步骤 #

• 修正拼写错误
  导入的文件名存在拼写错误：bootsrap-dark-5.min.css 应为 bootstrap-dark-5.min.css（缺少字母t）。修正后语句：

  import '../node_modules/bootstrap-dark-5/dist/css/bootstrap-dark-5.min.css';
  

• 确认包已正确安装
  检查项目根目录的package.json，确认dependencies中包含bootstrap-dark-5。如果没有，执行安装命令：

  npm install bootstrap-dark-5
  # 或使用yarn
  yarn add bootstrap-dark-5
  

• 简化导入路径（推荐）
  React项目支持直接从node_modules导入依赖包，无需写完整相对路径，避免路径错误：

  import 'bootstrap-dark-5/dist/css/bootstrap-dark-5.min.css';
  

• 验证文件实际存在
  手动前往项目根目录的node_modules/bootstrap-dark-5/dist/css/文件夹，确认bootstrap-dark-5.min.css文件真实存在，若路径或文件名与导入语句不符，按实际情况修改。

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