読者です 読者をやめる 読者になる 読者になる

Asset Pipeline で bootstrap.css が bootstrap-responsive.css よりも後に読み込まれてしまう

Twitter Bootstrap を twitter-bootstrap-rails を使わず、app/assets に放り込む形で導入したんだけど、レスポンシブ・デザインにしようと思って bootstrap-responsive.css を追加しても、スタイルがちゃんと適用されない…。

表示された HTML を Chromeデベロッパーツールで見たところ、bootstrap.css が bootstrap-responsive.css の後に読み込まれていた。スタイルが上書きされてしまっていたのか。

Asset Pipeline は何も指定しなければファイル名の昇順で読み込むから、bootstrap.css がちゃんと先に読み込まれるように対策をしなければいけないな。ファイル名を変更する、というのはスマートじゃないから、application.css を次のように編集した。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require bootstrap
 *= require_self
 *= require bootstrap-responsive
 *= require_tree .
 */

body {
  padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

読み込みたいファイルの順番を、 require を使って明示的に指定。これでちゃんとレスポンシブ・デザインが適用されるようになった。