個人のRailsアプリケーションをwebpacker化する際、BootstrapのCSSをwebpackerでimportしようとして少しだけハマったので共有します。

そもそも、yarn add bootstrapとするとBootstrap4系がインストールされますし、yarn add bootstrap@3としてバージョン3系を入れようとすると、SASSではなくLESSのBootstrapがインストールされます。バージョン3系は確かにLESSでしたね。

このRailsプロジェクトではSASSを使っていたので、yarn add bootstrap-sass@3として、SASSポート版のBootstrap3を入れました。

そしてこれをimportするわけです。

JS側は比較的単純で、↓でOK。

// application.js
import 'bootstrap-sass/assets/javascripts/bootstrap.js'

CSS側は↓のようになります。

@import "~bootstrap-sass/assets/stylesheets/bootstrap"

が、ここでWebpackerが↓のようなコンパイルエラーを吐きます。

 Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/Users/..(中略)../app/javascript/styles'

どうやらフォントファイルが見つからない、とのこと。

ソースコードでいうとここ（↓）のあたりで参照している箇所がまずそうに見えます。

ソースコードを見る限り$icon-font-pathをメンテすれば良いはずです。実際、sprocketsでインポートするときもパスの指定をしていましたし、READMEにも書いてあります。

今回はnode_modules以下から探すようにしたいので、~を使うように$icon-font-pathを定義すれば良いわけです。

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap"

@importの前に書けばOKです。