reactjs 找不到模块：无法解析“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'

提问by Steve

I am newbie in react.js. I have been following instruction in how-to-do-simple-form-validation-in-reactjsand I can run http://localhost:3000/

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

But after adding bootstrap in index.js, I got this error

但是在添加引导程序后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'

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

If I remove these two lines below, it works:

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

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

采纳答案by Delfino

In Bootstrap version 4, the file 'bootstrap-theme.css' have been removed, according to issue in github: https://github.com/twbs/bootstrap/issues/21078, in Change History you get detail

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

To use version 4 remove the import this, or else downgrade to version 3.

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

回答by Higgs Bogson

This error is caused by a misconfiguration, version mismatch or corrupted bootstrap install.

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

If you've got bootstrap and react-bootstrap installed already via some variation of:

如果您已经通过以下一些变体安装了 bootstrap 和 react-bootstrap：

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

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

(Check if your package.jsoncontains "bootstrap" and "react-bootstrap" if your not sure.)

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

Just install a different version of bootstrap and rebuild your project. That should replace or add that file (bootstrap/dist/css/bootstrap-theme.css) to that folder. A lower version of bootstrap worked for me as recommended in my create-react-app generated README.md:

只需安装不同版本的引导程序并重建您的项目。那应该将该文件 ( bootstrap/dist/css/bootstrap-theme.css)替换或添加到该文件夹​​中。按照我的 create-react-app 生成的 README.md 中的建议，较低版本的引导程序对我有用：

npm install --save react-bootstrap bootstrap@3

Adding Bootstrap

You don't have to use React Bootstraptogether with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:

Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:

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

Alternatively you may use yarn:

sh yarn add react-bootstrap bootstrap@3

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

回答by Mohammed Ishaan

reinstall the bootstrap and don't forget to mention --save to the command to save it to the node modules this solved the problem for me.

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

sudo npm install bootstrap --save 

回答by Rajan Lagah

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

i face same problem but after installing above packages it work well, may b you should also install same packages

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

回答by Nishantha Bulumulla

I got the same problem and this is how I resolved the problem. First of all delete the node_modulesdirectory from the project and then install bootstrap with below command.

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

npm install 
npm i bootstrap

Then, you can add the below import to the index.js

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

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

回答by Omar Donnadieu Mercado

Remove

消除

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

That worked for me.

那对我有用。

回答by Rito

I faced the same issue, but my project was not created with create-react-app, mine was using webpack.

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

I can answer how I resolved it for webpack, maybe you can find the changes required for create-react-appafter you go through this answer.

我可以回答我如何为 webpack 解决它，也许您可​​以create-react-app在完成此答案后找到所需的更改。

First I installed these two modules-
style-loader
css-loader

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

Then I modified the webpack.config.jsfile and added these lines inside the module.rulesarray.

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

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

This resolved the error in my project. You can also refer to this Github issue thread once, may be that may help you: https://github.com/facebook/create-react-app/issues/301

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

回答by esfandia

It is possible that when you installed bootstrap you were not in the directory that create-react-appcreated (that was the source of my problem). You can check with: npm list, which looks for locally installed packages.

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

Then scroll all the way to the top and see if you can find bootstrap listed there.

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

回答by Mussa Charles

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

Source: github

来源：github

回答by piyush vavaliya

You can also check that your package.json imported name of dependancy are not the same.

您还可以检查您的 package.json 导入的依赖名称是否相同。