バージョン情報
Ruby : 2.4.2
Rails : 5.1.4
React : 16.2.0
Redux : 3.7.2
Webpacker : 3.3.1
エラー内容
アセットプリコンパイルで、以下のエラーが発生
ERROR in ./app/javascript/src/application.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/open-iconic.eot' in '/Users/yuichiro/projects/pomodoro-rails/app/javascript/src'
原因
open-iconic-bootstrap.scss の4行目で、アイコンのフォントを相対パスで読み込んでいること。
node_modules/open-iconic/font/css/open-iconic-bootstrap.scss
$icon-font-path: '../fonts/' !default;
open-iconic のディレクトリ構成は以下なので、 相対パスが間違っている訳ではないし、
develpment 環境では動いていたが、 production ではルートから読み込まないといけないっぽい。
open-iconicのディレクトリ構成
open-iconic
├── font
│ ├── css
│ └── fonts
├── png
├── sprite
├── svg
└── webp
対処方法
open-iconic を読み込んでいる箇所の前で、 icon-font-path を上書きする。
app/javascript/src/application.scss
$icon-font-path: '~open-iconic/font/fonts/'; // ModuleNotFoundError エラー対策
@import '~open-iconic/font/css/open-iconic-bootstrap';
ちなみに $icon-font-path: '../fonts/' !default; の !default は 「既に定義されている場合は上書きしない」という意味なので application.scss から上書きできる。