私のアプリケーションのフロントエンド部分にjs、css、htmlとwebpackを統合しようとしています。私はapplication.cssファイルでカスタマイズしたCSSを試してから、application.jsにインポートしました。それは働いていた。コンパイルに失敗し、webpackのブートストラップ
今度は、番の糸であるを使用してCSSコードを削除し、ブートストラップをインストールしました。私は、ブートストラップパッケージがnode_modulesディレクトリにインストールされたyarn install
を走ったら後
は私の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"
です。次に、bootstrap.cssをブートストラップディレクトリから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";
をインポートしたときにこのエラーは発生しませんでした。私はブートストラップでのみこれを取得しています。ここで間違っているのは何ですか?