（◞‸◟）

bowerでinstallしたpackageをsprocketsでrequireしてたんだけどfontsが読み込まれない〜っていうお約束っぽいやつでハマった。

ググってちょいちょい出てくる「bower_componentsをsprockets.append_pathしてね」みたいなのもやってみたけど解決しなかった。

原因

/stylesheets/all.cssでsprocketsのrequire使ってたけど読み込まれてるのはcssだけだった
fontsは自力でimport_assetする必要があった

解決

fontsファイルをimport_assetしてビルド成果物に追加した

例

今回はbower install ratchetでratchetの組み込みを試した。

.
├── Gemfile
├── Gemfile.lock
├── bower.json
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts
    │   └── all.js
    ├── layouts
    │   └── layout.erb
    └── stylesheets
        ├── all.css
        └── normalize.css

all.css

/**
 *= require ratchet
 */

config.rb

...

# config.rbのどっか適当なとこに
after_configuration do
  # bower_componentsのディレクトリパスをsprocketsの参照パスに追加
  sprockets.append_path File.join(root, "bower_components")
end

...

これだとcssは当たるけど、fontsファイルがないのでicon画像とかが上手く表示されない。
append_pathは飽くまでsprocketsのrequire構文で参照出来るファイルのパスを追加するだけっぽい。

ファイル実体をbuild成果物に含めたい場合はsprockets.import_assetを使う必要があるっぽい。

config.rb

after_configuration do
  bower_dir = "bower_components" #.bowerrcでインストール先変更してる人は適宜読み換えて下さい

  sprockets.append_path File.join(root, bower_dir)

  # bower_components内のfontsディレクトリにあるファイルを捜査
  Dir.glob(File.join("#{root}", bower_dir, "*", "fonts", "*")) do |file|
    asset_path = Pathname.new(file).relative_path_from(Pathname.new(File.join(root, bower_dir)))

    # import_assetの引数はsprockets.append_pathしたpathに対する相対パスなので注意
    sprockets.import_asset asset_path do |path|
      org_path = Pathname.new(path)
      # そのままだと"ratchet/fonts/*"にファイルが出力されてしまい、
      # cssとの相対パスがずれるので出力先pathを"fonts/*"に変更
      "fonts/#{org_path.basename}"
    end
  end
end

これでbuild/fonts/*にfontsファイルが出力されるようになり、無事アイコンが表示されるようになった。
(画像ファイルが読み込まれない場合も多分同じ原因なので適宜globを書き換えたら直るはず)

append_path使わずcssもjsも全部import_assetでlib/ratchet/*とかに吐いてstylesheet_link_tag等で読み込んだ方がスッキリする気がする。