GitHubにあるREADME.mdを参考に、bootstrap-sassをインストールしてみました。
application.scssの設定
するとapplication.scssにimportするファイルは、bootstrapとbootstrap-sprocketsの2ファイルのみとなっています。
// 'bootstrap-sprockets' must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";"
そのため、このままですと、ページごとに用意したscssファイルを読み込むためには、
毎回application.scssにimportする必要がでてきてしまいます。
デフォルトのapplication.css
通常、設定なしで rails new を行うと、application.css には、
$ cat app/assets/stylesheets/application.css
/*
*= require_tree . # 指定されたディレクトリ以下のすべてを再帰的にインクルード(順番の保証なし)
*= require_self # require_self呼び出しが行われたその場所にCSSファイルがあれば読み込みます
*/
というディレクティブが設定され、stylesheetsディレクトリ以下にcssを置くと、 自動で読み込まれる(順番は保証されない)ようになります。
RailsでSassファイルをどう管理するべきか
いろいろ方法は有ると思うのですが、今回はこちらの記事を参考に ディレクトリ構成を作ってみました。
まず、読み込み順を守る必要のあるファイル(bootstrapとbootstrap-sprockets)は、そのままapplication.scssに。
ページ個々のscssに関しては、app/assets/stylesheets/partialsディレクトリを生成し、そちらに配置しておきます。
partialsディレクトリでは、読み込み順が保証されないので、注意してください。
# app/assets/stylesheets/application.scss
@import “bootstrap-sprockets”;
@import “bootstrap”;
@import “partials/*“; // glob importing
※ sass-railsのバージョンが古いと、glob importing には対応していないので、動かない場合はバージョンを上げてみて下さい。
partialsディレクトリにファイルがないとエラーになる
ただこのままの状態だと、partialsディレクトリにファイルがないので、File to import not found or unreadableエラーが出てしまいます。
それを防ぐために、とりあえずブランクのscssファイルをディレクトリに配置するようにしました。
$ touch app/assets/stylesheets/partials/blank.scss
最後のブランクのscssを用意するのはかなり微妙ですが、 ディレクトリに別のscssが用意された時点で、blank.scssを削除するなど対応する形で当面運用しようと思います。
application.jsの設定
最低限必要なのは、下記のJsになります。
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets