Rails4 にBootstrap3 を入れたらglyphicon 関係で404エラーがてんこ盛り出たお話

投稿者: | 2015/06/12

Rails4.2.1 にBootstrap3.3.4 を入れたら、glyphicon のロードに失敗して404エラーがてんこ盛り出ました。

で、あれこれやったのですが、ダメでして。
結局、以下の2つのファイルでアセットパイプラインの接続先を修正してやれば良いだけだったというお話。

本題

私の場合、Bootstrap をひと通り入れた後、bootstrap.css とbootstrap.min.css の下記を変更すればOKでした。

これを。

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

こう変えるだけ。(fonts → assets)

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../assets/glyphicons-halflings-regular.eot');
  src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       url('../assets/glyphicons-halflings-regular.woff2') format('woff2'), 
       url('../assets/glyphicons-halflings-regular.woff') format('woff'), 
       url('../assets/glyphicons-halflings-regular.ttf') format('truetype'), 
       url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

いやー、ちらっと触っただけですが、Bootstrap 便利ですね。
なんだかjQuery に初めて触れたときを思い出しました。

最初は単なるCSSライブラリだろ?程度に考えていたんですが、これはよーできとるわ。
HTMLレイアウトの痒いところに手が届くし、構造化というHTMLの本義をちゃんと踏まえている。

まあ、precompile とかはWeb技術としてはどーなの?と思わないでもないですが、そこはパフォーマンスとの兼ね合いだったのでしょうしね。

これはちゃんと使えるようになると、かなり強力な武器になりそうです。
Rails と併せて身に付けて行きたいなあ。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください