未找到模块：无法解析“C:\react-form-validation-demo\src”中的“bootstrap/dist/css/bootstrap-theme.css”答案

【问题标题】：Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\react-form-validation-demo\src'未找到模块：无法解析“C:\react-form-validation-demo\src”中的“bootstrap/dist/css/bootstrap-theme.css”
【发布时间】：2018-02-18 02:26:16
【问题描述】：

我是 react.js 的新手。我一直在遵循how-to-do-simple-form-validation-in-reactjs 的指示，我可以运行http://localhost:3000/

但是在index.js 中添加引导程序后，我得到了这个错误

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();

如果我删除下面的这两行，它会起作用：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

【问题讨论】：

为了将 css 文件导入 js，您需要使用某种捆绑器，例如 webpack。不过，本教程使用的是create-react-app，它应该会为您处理所有这些。
我认为我的示例没有使用 webpack

标签： reactjs

【解决方案1】：

在 Bootstrap 版本 4 中，文件“bootstrap-theme.css”已被删除，根据 github 中的问题：https://github.com/twbs/bootstrap/issues/21078，Change History you get detail

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

【讨论】：

【解决方案2】：

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

如果您已经通过以下方式安装了 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

【讨论】：

【解决方案3】：

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

sudo npm install bootstrap --save

【讨论】：

使用路径为我工作：import 'bootstrap/dist/css/bootstrap.css';
不要使用 sudo 安装依赖！ sudo 应该只在真正需要的时候使用——它会导致很多问题

【解决方案4】：

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

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

npm install --save react-bootstrap

然后bootstrap 将丢失。请尝试以下方法更正：

npm install --save bootstrap

正确的初始安装方式如下：

npm install --save react-bootstrap bootstrap

【讨论】：

对于那些因为拼写错误booSTrap，which refers to another valid package而来到这里的人，应该有标题的问题错误。这个答案解决了我的问题。
真的有一个名为booSTrap的有效包吗？这听起来像是供应链攻击的完美名称。
是的，只需点击我之前评论中的链接：npmjs.com/package/boostrap - 我理解你的参考，但我很好奇：你在想什么英文表达？
没有英文表达。通过“供应链攻击”，我指的是某人以非常接近真实、流行的包的名称发布包，并将恶意内容放入其中。
好的，我明白你的意思了。是的，我同意。

【解决方案5】：

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

npm install 
npm i bootstrap

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

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

【讨论】：

【解决方案6】：

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

npm install react-bootstrap bootstrap

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

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

【讨论】：

【解决方案7】：

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

我遇到了同样的问题，但是在安装了上面的包之后它运行良好，可能b你也应该安装相同的包

【讨论】：

【解决方案8】：

删除

import 'bootstrap/dist/css/bootstrap-theme.css'

这对我有用。

【讨论】：

它改变了我的网络应用程序的外观和感觉。
看起来在安装导入后不需要正确加载引导样式。因此，如果您遇到问题，请尝试按照@Higgs Bogson 的描述进行安装，然后删除导入。（B/c duh，删除导入会删除错误，但我怀疑你是在这里寻找解决方案，因为你一开始并不需要它。）

【解决方案9】：

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

来源：github

【讨论】：

【解决方案10】：

我遇到了同样的问题，但我的项目不是使用 create-react-app 创建的，我的项目是使用 webpack 创建的。

我可以回答我是如何为 webpack 解决它的，也许你可以通过这个答案找到create-react-app 所需的更改。

首先我安装了这两个模块-
style-loader
css-loader

然后我修改了webpack.config.js 文件并将这些行添加到module.rules 数组中。

{
  test: /\.css$/,
  loader: 'style-loader'
},
{
  test: /\.css$/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

这解决了我项目中的错误。你也可以参考这个 Github issue thread 一次，可能对你有帮助：https://github.com/facebook/create-react-app/issues/301

【讨论】：

【解决方案11】：

检查 package.json 文件中是否有引导程序。如果存在，请删除并使用以下命令重新安装，如果不存在则安装。

npm install --save bootstrap

【讨论】：

这个解决方案对我有用。

【解决方案12】：

你也可以检查一下你的package.json导入的依赖名不一样。

【讨论】：

【解决方案13】：

安装 bootstrap 时，您可能不在 create-react-app 创建的目录中（这是我的问题的根源）。您可以查看：npm list，它会查找本地安装的软件包。

然后一直滚动到顶部，看看是否可以找到列出的引导程序。

【讨论】：

【解决方案14】：

停止 npm 服务器而不是重新启动它。完美安装包就解决了。

【讨论】：

【解决方案15】：

确保已安装 bootstrap 和 react-bootstrap。

npm install bootstrap react-bootstrap

【讨论】：

【解决方案16】：

导入'../node_modules/bootstrap/dist/css/bootstrap.min.css';

【讨论】：

【解决方案17】：

我只是重新安装了之前安装在我的项目文件夹中的 Bootstrap 版本，它就可以工作了。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案18】：

从“resource/js/app.js”中删除require('./bootstrap')

【讨论】：