（◞‸◟）
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等で読み込んだ方がスッキリする気がする。