LoginSignup
4

More than 5 years have passed since last update.

middleman+bowerでfontsが読み込まれないやつ

Last updated at Posted at 2015-03-22

(◞‸◟)

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4