管理画面と通常画面で別のCSSを適用する

Rails

rails4
rails3

要は、管理画面だけでtwitter-bootstrapを使いたかった。

管理画面はadminパスが入っているものとし、一般ユーザが使うのはパスなしとする。

URL

localhost:3000/admin
localhost:3000/

ディレクトリ構成

Viewは以下のようなディレクトリ構成にしている。

app/views/layouts/admin/application.html.erb
app/views/layouts/application.html.erb

Gemfile

Rails4はこれだけでよい。
rails g bootstrap:installなんてコマンドは不要だった。

gem 'bootstrap-sass', '~> 2.3.0.1'

肝心のcssはadmin.cssとapplication.cssを別で作成しておく。

CSS

admin.css.scssには、bootstrapをimportする。
application.css.scssから//= require_tree .を削除すること。
そいつがあるとcssファイルをすべてimportしてしまう。

admin.css.scss
@import 'bootstrap';
application.css.scss
// *= require_self

テンプレート

それぞれlink_tagの行のみを抜粋。cssのファイル名を第一引数に渡す。

admin/application.html.erb
<%= stylesheet_link_tag    "admin", media: "all", "data-turbolinks-track" => true %>
application.html.erb
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>

admin::controller

lautoutを指定していないと、adminネームスペースを区切っていてもapplication.html.erbを見に行ってしまう。
なので、admin::controllerではlayoutを指定してなければならない。

class Admin::HomeController < ApplicationController
  layout 'admin/application'
  def index
  end
end

以上。