找不到模块:无法解析'C: Users test counter-app src'中的'bootstrap / dist / css / bootstrap.cs(代码片

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了找不到模块:无法解析'C: Users test counter-app src'中的'bootstrap / dist / css / bootstrap.cs(代码片相关的知识,希望对你有一定的参考价值。

我是新来的反应js。我正在尝试创建一个组件。为此,我安装了成功安装的bootstrap(版本4.1.1)。

然后我在index.js中导入了相同的内容,并在重新加载页面时(localhost:3000)我得到了错误消息:Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:Users estcounter-appsrc'

我的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"
  ]
}

请帮我解决这个问题。谢谢。

答案

将导入路径更改为bootstrap.min.css,如下所示:

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

另一答案

不建议使用这样的bootstrap。你应该看看react-bootstrap。你需要运行:

npm install react-bootstrap bootstrap

然后:

import Button from 'react-bootstrap/Button';

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

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

另一答案

发生这种情况要么是因为库的安装不成功,即bootstrap在node_modules目录中安装有问题,要么代码中对库的引用不正确。您可以通过在bootstrap中查找引导文件夹来验证您的node_modules安装是否正确吗?

这将是<base_path>/node_modules/bootstrap,其中<base_path>是您项目的根目录位置。对你而言,我相信绝对的道路如下:

C:Users	estcounter-appsrc
ode_modulesootstrap

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

npm i -S bootstrap

因为这会将bootstrap保存为项目的依赖项。您在bootstrap中对index.js的引用看起来很好:import 'bootstrap/dist/css/boostrap.css';据说,很多bootstrap的功能取决于以下库:popper.jsjquery。因此,一旦解决了安装问题,您必须安装这些模块并在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';

希望这有帮助!

另一答案

我有同样的问题,但设法使用这些步骤解决它:

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

以上是关于找不到模块:无法解析'C: Users test counter-app src'中的'bootstrap / dist / css / bootstrap.cs(代码片的主要内容,如果未能解决你的问题,请参考以下文章

找不到模块:无法解析“./reducers/index”

找不到模块:错误:无法解析“流”或 TypeError:stream.Readable 不是构造函数

text Webpack编译,找不到模块:错误:无法解析模块'步伐'

找不到模块:无法解析'./AppRoutes'

找不到模块:无法解析'autosuggest-highlight / match'

找不到模块:无法解析'react-materialize'