找不到模块：无法解析 'C:\Users\test\counter-app\src' 中的 'bootstrap/dist/css/bootstrap.css'

Question

我是 React js 的新手。我正在尝试创建一个组件。为此，我安装了成功安装的 bootstrap（版本 4.1.1）。

然后我在 index.js 中导入了相同的内容，并在重新加载页面 (localhost:3000) 时收到错误消息：

Module not found: 
Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:\Users\test\counter-app\src'

我的index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";

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

serviceWorker.unregister();

我的 package.json :

{
  "name": "counter-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

请帮我解决这个问题。

Answer 1

像这样将导入路径更改为 bootstrap.min.css：

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

Answer 2

不推荐这样使用 bootstrap。你应该看看 react-bootstrap。您需要运行:

npm install react-bootstrap bootstrap

然后：

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

查看他们的 documentation 了解更多信息。

Answer 3

这可能是因为 库安装不成功 ，即 bootstrap 在您的 node_modules 目录中安装时出现问题，或者您的您的代码中对库的引用不正确。您能否通过在 node_modules 中查找 bootstrap 文件夹来验证 bootstrap 安装是否正确？

这将位于 <base_path>/node_modules/bootstrap，其中 <base_path> 是项目的根目录位置。对于你，我相信绝对路径如下：

C:\Users\test\counter-app\src\node_modules\bootstrap

如果您没有看到 bootstrap 目录，请执行以下操作：

npm i -S bootstrap

因为这会将 bootstrap 保存为项目的依赖项。您在 index.js 中对 bootstrap 的引用看起来不错：import 'bootstrap/dist/css/boostrap.css'; 话虽如此，bootstrap 的很多功能都依赖于以下库：popper.js，和 jquery。因此，一旦您解决了安装问题，您还必须安装这些模块并在 index.js 中适当地引用它们。大致如下：

安装模块：

npm i -S popper.js
npm i -S jquery

index.js

import 'jquery/dist/jquery.js';
import 'popper.js/dist/umd/popper.js';
import 'boostrap/dist/js/bootstrap.js';

希望对您有所帮助！

Answer 4

我遇到了同样的问题，但通过以下步骤设法解决了它：

删除 node_modules 文件夹
通过运行 npm install bootstrap
通过运行 npm install 安装其他软件包。

Answer 5

谨防混淆“boostrap”与“bootsrap”

Theese，安装不同的包：

$ npm install boostrap

$ npm install bootstrap

我要的是第二个。因此，我得到了问题的错误。

找不到模块：无法解析 'C:\Users\test\counter-app\src' 中的 'bootstrap/dist/css/bootstrap.css'

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:\Users\test\counter-app\src'

reactjs

react-bootstrap

react-component