React访问上级目录导入bootstrap.css报模块找不到如何解决

错误原因 #

你当前写的相对路径没有正确指向client目录下的node_modules文件夹，导致打包工具找不到目标文件。

推荐解决方案 #

只要你已经在client项目根目录执行过npm install bootstrap完成依赖安装，无需手写完整的node_modules路径，直接在LoginForm.js中写入以下导入语句即可：

import 'bootstrap/dist/css/bootstrap.min.css'

React的默认打包工具会自动从项目根目录的node_modules中查找匹配的依赖文件，不需要手动拼接相对路径。

小提示：如果整个项目都需要用到bootstrap样式，建议将以上导入语句写在项目入口文件（一般是src/index.js）中全局引入，不需要在每个组件单独导入。

手动写相对路径的方案 #

如果你需要手动指定相对路径，根据你的文件位置：

• LoginForm.js 位于 /client/src/components/Login/Signup/ 目录下
• node_modules 位于 /client/ 目录下

你需要向上跳转4级目录到达client根目录，再访问node_modules，导入语句如下：

import '../../../../node_modules/bootstrap/dist/css/bootstrap.min.css'

内容的提问来源于stack exchange，提问作者Pavel Sarygin