Failed to compile, bootstrap on webpack

Question

I am trying to integrate js,css and html with webpack for the front end part of my application. I tried with customised css in application.css file and then imported that in application.js . It was working.

Now I removed the css code and installed bootstrap using yarn .

Following is my package.json

"name": "evil_chat",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.2.0",
    "coffeescript": "1.12.7",
    "normalize.css": "^7.0.0",
    "bootstrap": "3.3.7"

Once I ran yarn install the bootstrap package was installed in the node_modules directory. Then I tried to import bootstrap.css from bootstrap directory into application.js file by doing the following.

application.css

@import "bootstrap/dist/css/bootstrap.css";

application.js

import "./application.css";

document.body.insertAdjacentHTML(
  "afterbegin",
  "Finally webpacker!!!"
);
console.log("Hello World from Webpacker");

I am getting the following error.

Failed to compile.

./frontend/packs/application.css
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/home/desmond/Projects/React/evil_chat/frontend/packs'

But I didn't get this error when I imported @import "normalize.css/normalize.css"; . I am getting this only with bootstrap. What am doing wrong here?

Answer 1

It seems bootstrap.css have dependency on glyphicons-halflings-regular.eot which may not be present in your application. Download this files and keep them in relevant folder structure. Maintain the folder structure accordingly.

Else in bootstrap.css files search by that font name and comment that code