reactstrap - create-react-app - 未找到 bootstrap/dist/css/bootstrap.css - v.4

Posted 2023-03-07

【中文标题】reactstrap - create-react-app - 未找到 bootstrap/dist/css/bootstrap.css - v.4

【英文标题】：reactstrap - create-react-app - not found bootstrap/dist/css/bootstrap.css - v.4

【发布时间】：2018-09-07 08:27:20

【问题描述】：

我是新来的。我正在尝试使用 bootsrap 4 创建一个反应应用程序。我正在按照以下步骤使用 reactstrap：

create-react-app my-app

npm install bootstrap --save

npm install --save reactstrap@next react react-dom

在 src/index.js 文件中导入 Bootstrap CSS： 导入'bootstrap/dist/css/bootstrap.min.css';

但是当我启动我的应用程序时，我收到了这个错误：

编译失败。

./src/index.js 未找到模块：无法解析 'D:\React\my-app2\src' 中的'bootstrap/dist/css/bootstrap.css'

我曾经使用 CDN 引导程序，你知道，在我的 html 页面中，link rel="stylesheet" ... etc 和 script src=""... etc。但是使用 reactstrap，js 文件在哪里呢？ (jquery, popper, bootstrap) （当我运行 npm install bootstrap --save 时都在一起？）

谢谢

【问题讨论】：

去看看./node_modules/bootstrap文件夹里面，你就能看到你的css文件在哪里。

【参考方案1】：

正如您从错误中看到的，它会尝试在您的 src 文件夹中查找 bootstrap/dist/css/bootstrap.css。但是，如果您查看您的项目文件，您会注意到 bootstrap 文件夹位于 node_modules 文件夹内的上一级（在根中）。

所以要么搜索并更正您的路径：

../node_modules/bootstrap/dist/css/bootstrap.css.

或者添加（如果您还没有这样做的话）对您的 index.js 的引用：

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

---

这是文件树：

+-node_modules
 |-bootstrap
  |-dist
   |-css
    |-bootstrap.css
+-src
 |-index.js

【讨论】：

简直太神奇了，我想知道为什么所有教程都有这样的路径 import 'bootstrap/dist/css/bootstrap.min.css'; ？对此有什么想法吗？

文件结构可能取决于教程。最好的方法是知道 CSS 文件的位置，它的传递是什么并使用它。