Rails の assetpipeline が便利だけど sass の @import で困る

トピック的には Rails4 どころか Rails3 でしかも初歩的な話なのですが、久々に触ったらちょっと困ったので備忘録。

Rails には 3 あたりから AssetPipeline という、画像、js、css をよしなに扱ってくれる app/assets/ というディレクトリがあるのですが、css を sass で書いたときに @import を使う場合に書き換えが必要でした。

application.css を .css.sass にリネーム

application.css はAssetPipeline が最初に読み込む、ハブ css のようなものですので、ここで @import してあげます。

sass として動作させたいので、拡張子を .css => .css.sass に変更します。これだけでOK。

さらに、 application.css に書いてある特殊なコメントを利用して、コンパイルする css をひろっているので、デフォルトで挿入されている *= require_tree . は削除します。

これは、カレントディレクトリ(application.cssのある場所)と、それ以下のディレクトリのファイルをコンパイル対象にするという指定なので、自動的にまとめてくれて便利なのですが、 @import を使う場合にはむしろ邪魔です。

あとは、任意の順序で @import してあげます。

デフォルトの jQuery や gem で追加された特殊コメント行ももちろん併用できます。

参考

シェアする

  • このエントリーをはてなブックマークに追加

フォローする