锐客网

  1. 首页 > 睿知 > it技术 > >

找不到模块（无法解析'C： Userstestcounter-appsrc'中的'bootstrap / dist / css / bootstrap.cs(代码片）

IT知识bootstrap无法解析

少年意气强不羁，虎胁插翼白日飞。这篇文章主要讲述找不到模块：无法解析' C： Userstestcounter-appsrc' 中的' 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();

【找不到模块（无法解析' C： Userstestcounter-appsrc' 中的' bootstrap / dist / css / bootstrap.cs(代码片）】我的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.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';

希望这有帮助！
另一答案我有同样的问题，但设法使用这些步骤解决它：
  1. 删除node_modules文件夹
  2. 通过运行npm install bootstrap安装bootstrap
  3. 通过运行npm install安装其他软件包。

    推荐阅读


    上一篇：使用Realm Swift Pod的APP无法运行（CMD + R，崩溃编译Realm）但它确实测试（CMD + U）并且还存档

    下一篇：我可以在界面上使用@MappedSuperclass注释吗（）