僕がRailsチュートリアルを進めていて必要になったものだけまとめました。
2つの作業を行います
・テンプレートエンジンSlimの導入
・twitter-bootstrapのsass(scss)を導入
基本的にはGemfileを書いて終了なんですが笑
その後に少しやることがあったり、注意点があったのでそこを書きます。
僕の環境はRuby2.2.2でRailsが4.2.1です。
もしかしたらデフォルトで作られるGemfileが異なる可能性があるので、バージョンは確認してください
まずはじめにrails newします。
$ rails new sample_app
$ cd sample_app
Gemfileに以下の2行を追加します。
gem 'slim-rails'
gem 'bootstrap-sass'
勢い良くbundle installを叩きます。
これで必要なツールが揃いました。
$ bundle install
gemが入りました。
現時点のappフォルダの中身はこのようになっています。
(これもバージョンによって異なるかも...)
app
├── assets
│ ├── images
│ ├── javascripts
│ │ └── application.js
│ └── stylesheets
│ └── application.css
├── controllers
│ ├── application_controller.rb
│ └── concerns
├── helpers
│ └── application_helper.rb
├── mailers
├── models
│ └── concerns
└── views
└── layouts
└── application.html.erb
テンプレートエンジンSlimの導入
実はslim-railsを導入した時点で、テンプレートエンジンがslimに変更されます。
しかし、rails new によって作成したviews/layouts/application.html.erbはそのままなので、slimに書き換えます。
$ mv app/views/layouts/application.html.erb app/views/layouts/application.html.slim
doctype html
html
head
title SampleApp
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track'=> true
= javascript_include_tag 'application', 'data-turbolinks-track'=> true
= csrf_meta_tags
body
== yield
元々は
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
だいぶスッキリしました笑
rails generateをした時にslimファイルがデフォルトで作られるようにconfig/application.rbにテンプレートエンジンを明記する必要があるという記事を見かけましたが、僕の環境では書かなくても大丈夫でした。
これでslimを使う準備はOKです。
出力したいhtmlをイメージしてslimを書いていくので、参考にしているサイトを挙げておきます。
http://qiita.com/yterajima/items/53fd0387279510ff082a
http://qiita.com/moriyaman/items/c0d60406422677bcb398
本家ドキュメントです。http://www.rubydoc.info/gems/slim/frames
TwitterBootstrapの導入
2つのファイルを編集する必要があります。
まずは
application.cssの拡張子をscssへ変更します。
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
続いて
app/assets/stylesheets/application.scssを編集します。
コメントが上部にたくさん書いてありますが、 消さないでください
一番下に以下の2行を追記します。
@import "bootstrap-sprockets";
@import "bootstrap";
@importってcssでも使うし、css->scssに変更しなくてもいけるんじゃね?って試してみたのですが、無理でした。
ちゃんとリネームしてください。
続いて
app/assets/javascripts/application.jsを編集します。
現状以下のようになっています。
// なんか色々なコメント
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
をrequire jqueryの下に追記します。
これでbootstrapが読み込まれているので、.containerとか.rowとかが使い放題です。
これから使うに当たって注意する点は、twitter-bootstrapが2系か3系どちらを読み込んでいるかによってクラス指定とかが変わることです。ネットで書いてあるのにスタイル適用されねーじゃねえか(#･∀･)ってなった時には一度確認してみてください。
僕もRailsチュートリアルを進めていて、結構クラス名が見つかりませんってエラーを見かけます。2と3でクラスの名前が変わったという比較表です。
http://getbootstrap.com/migration/
あとどうしても変更が読み込まれない時は、一度コマンドラインで
$ spring stop
すると幸せになれたり、なれなかったりします。