编译失败，在 webpack 上引导答案

【问题标题】：Failed to compile, bootstrap on webpack编译失败，在 webpack 上引导
【发布时间】：2018-06-04 10:55:33
【问题描述】：

我正在尝试将 js、css 和 html 与 webpack 集成到我的应用程序的前端部分。我尝试在 application.css 文件中使用自定义 css，然后将其导入 application.js。它正在工作。

现在我删除了 css 代码并使用 yarn 安装了引导程序。

以下是我的 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"

在我运行yarn install 后，引导程序包安装在 node_modules 目录中。然后我尝试通过执行以下操作将 bootstrap.css 从 bootstrap 目录导入到 application.js 文件中。

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");

我收到以下错误。

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'

但我在导入@import "normalize.css/normalize.css"; 时没有收到此错误。我只用引导程序得到这个。这里有什么问题？

【问题讨论】：

标签： javascript ruby-on-rails reactjs webpack

【解决方案1】：

似乎bootstrap.css 依赖于glyphicons-halflings-regular.eot，这可能不存在于您的应用程序中。下载这些文件并将它们保存在相关的文件夹结构中。相应地维护文件夹结构。

bootstrap.css 文件中的其他内容按该字体名称搜索并注释该代码

【讨论】：

我试图修复这个问题很多次，最后发现glyphicons-halflings-regular.eot可能不在我的应用程序的字体文件夹中。