javascript - 编译失败，在 webpack 上引导

Question

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

现在我删除了 CSS 代码并使用 yarn 安装了 bootstrap。

以下是我的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， Bootstrap 包就会安装在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";时，我没有得到这个错误。我只能通过 Bootstrap 得到这个。这里做错了什么？

Answer 1

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

Else 在 bootstrap.css 文件中按该字体名称搜索并注释该代码