Модуль не найден: не удается разрешить «bootstrap / dist / css / bootstrap.css» в «C: \ Users \ test \ counter-app \ src» - PullRequest
Новая
       57

Модуль не найден: не удается разрешить «bootstrap / dist / css / bootstrap.css» в «C: \ Users \ test \ counter-app \ src»

2 голосов
/ 14 марта 2019

Я новичок, чтобы отреагировать.Я пытаюсь создать компонент.Для этого я установил начальный загрузчик (версия 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"
  ]
}

Пожалуйста, помогите мне исправить это.Спасибо.

Ответы [ 4 ]

2 голосов
/ 14 марта 2019

Измените путь импорта на bootstrap.min.css следующим образом:

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

0 голосов
/ 30 апреля 2019

У меня была та же проблема, но мне удалось решить ее, выполнив следующие действия:

  1. Удалить папку node_modules
  2. Установить загрузчик, запустив npm install bootstrap
  3. Установите другие пакеты, запустив npm install.
0 голосов
/ 14 марта 2019

Это происходит либо потому, что установка библиотеки не удалась , т. Е. Возникла проблема с начальной загрузкой в ​​каталоге node_modules, либо неверная ссылка на библиотеку в вашем коде . Можете ли вы проверить правильность установки bootstrap, посмотрев в папке node_modules папку начальной загрузки?

Это будет в <base_path>/node_modules/bootstrap, где <base_path> - местоположение корневого каталога вашего проекта. Я считаю, что для вас абсолютный путь следующий: 

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

Если вы не видите каталог bootstrap, сделайте следующее: 

npm i -S bootstrap

, поскольку это сохранит загрузчик как зависимость для вашего проекта. Ваша ссылка на bootstrap в index.js выглядит хорошо: import 'bootstrap/dist/css/boostrap.css'; С учетом вышесказанного, многие функции начальной загрузки зависят от следующих библиотек: 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';

Надеюсь, это поможет!

0 голосов
/ 14 марта 2019

Использование такой начальной загрузки не очень рекомендуется. Вы должны посмотреть на реакции-бутстрап . Вам нужно будет запустить: 

npm install react-bootstrap bootstrap

и затем: 

import Button from 'react-bootstrap/Button';

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

Ознакомьтесь с их документацией , чтобы узнать больше.

...