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后，引导程序包安装在 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";时我没有收到此错误。我只用引导程序得到这个。这里有什么问题？

Answer 1

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

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

无法编译，在webpack上引导

1 个答案: