找不到模块:无法解析'C:\ react-form-validation-demo\src'中的'bootstrap/dist/css/bootstrap-theme.css'

Question

我是react.js的新手.我一直关注https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs

我可以运行http:// localhost:3000 /

但是在index.js中添加bootstrap后,我收到了这个错误

无法编译./src/index.js未找到模块:无法解析'C:\ react-form-validation-demo\src'中的'bootstrap/dist/css/bootstrap-theme.css'

Failed to compile ./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap-theme.css' in
'C:\react-form-validation-demo\src'

如果我删除下面这两行,它的工作原理如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

将解决方案添加到我遇到的原因中 - 这是我的失误，但在阅读其他答案时仍然不清楚。

如果react-bootstrap像这样单独安装：

npm install --save react-bootstrap

然后bootstrap就会失踪。请尝试以下方法进行纠正：

npm install --save bootstrap

初次安装的正确方法如下：

npm install --save react-bootstrap bootstrap

Answer 2

根据github中的问题，在Bootstrap版本4中，文件'bootstrap-theme.css'已被删除：https : //github.com/twbs/bootstrap/issues/21078，在“ 更改历史记录”中您可以获得详细信息

要使用版本4，请删除导入版本，否则降级为版本3。

Answer 3

重新安装引导程序，不要忘记在命令中提及 --save 以将其保存到节点模块，这为我解决了问题。

sudo npm install bootstrap --save 

Answer 4

我遇到了同样的问题，这就是我解决问题的方法。首先从项目中删除node_modules目录，然后使用以下命令安装引导程序。

npm install 
npm i bootstrap

然后，您可以将以下导入添加到 index.js

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

Answer 5

使用以下命令安装引导程序。

npm install react-bootstrap bootstrap

然后在 index.js 文件中包含以下行。

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

Answer 6

npm install --save bootstrap@^4.0.0-alpha.6  react-bootstrap@^0.32.1

我面临同样的问题，但安装上述软件包后它运行良好，也许你也应该安装相同的软件包

Answer 7

此错误是由于配置错误，版本不匹配或引导程序安装损坏引起的。

如果您已经通过以下几种方式安装了bootstrap和react-bootstrap：

npm install --save bootstrap@^4.0.0-alpha.6 react-bootstrap@^0.32.1

（如果package.json不确定，请检查您是否包含“ bootstrap”和“ react-bootstrap”。）

只需安装其他版本的引导程序并重建项目。那应该将文件（bootstrap/dist/css/bootstrap-theme.css）替换或添加到该文件夹​​。引导程序的较低版本为我工作，如我在create-react-app生成的README.md中所建议的：

npm install --save react-bootstrap bootstrap@3

添加引导程序

您不必将React Bootstrap与React一起使用，但它是将Bootstrap与React应用程序集成的流行库。如果需要，可以按照以下步骤将其与Create React App集成：

从npm安装React Bootstrap和Bootstrap。React Bootstrap不包含Bootstrap CSS，因此也需要安装它：

sh npm install --save react-bootstrap bootstrap@3

或者，您可以使用yarn：

sh yarn add react-bootstrap bootstrap@3