Railsでページごとのscssを管理する方法

Posted by Tatsuyano on Thu, Apr 2, 2015
In
Tags ruby rails

GitHubにあるREADME.mdを参考に、bootstrap-sassをインストールしてみました。

application.scssの設定

するとapplication.scssにimportするファイルは、bootstrapbootstrap-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ファイルをどう管理するべきか

いろいろ方法は有ると思うのですが、今回はこちらの記事を参考に ディレクトリ構成を作ってみました。

まず、読み込み順を守る必要のあるファイル(bootstrapbootstrap-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

参考サイト