2017-12-21 18 views
1

私のアプリケーションのフロントエンド部分に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";をインポートしたときにこのエラーは発生しませんでした。私はブートストラップでのみこれを取得しています。ここで間違っているのは何ですか?

答えて

2

bootstrap.cssはあなたのアプリケーションに存在しない可能性がありますglyphicons-halflings-regular.eotに依存しているようです。このファイルをダウンロードし、関連するフォルダ構造に保管してください。それに応じてフォルダ構造を更新します。

その他bootstrap.cssそのフォント名でのコメントとそのコード

関連する問題