bootstrap3-sassで一悶着
rails tutorial をベースにdeviseを使ってログイン画面を作っているのだが、いくら頑張ってもテキストボックスが適切なサイズにならなくて、せっかくの週末を無駄にしてしまった。
bootstrapの公式サイトからGrid Systemのサンプルコードをコピペしても期待通りのレイアウトにならなかったので、railsでインストールしているbootstrapがおかしいのでは…と思い、gemfileを確認したら、rails tutorialでインストールしたbootstrap-sassはver.2で、bootstrapの公式サイトはver.3の解説をしていた。
bootstrap-sassのver.3もリリースされているようだったので、bootstrap-sassの入れ替えを行ってみた。
■ gemfileの書き換え
gemfile の太字の部分を修正した。
source 'https://rubygems.org'
ruby '2.1.1'
#Railsチュートリアル リスト3.1をベースとしている
#ruby-gemset=railstutorial_rails_4_0gem 'rails', '4.1.0'
gem 'bootstrap-sass', '~> 3.2'
# gem 'bootstrap-sass', '~>2.3'
gem 'sprockets', '~>2.11'
…
そして、いつも通り適用して、railsサーバを起動してプレビューしてみると…
~/workspace/democritus(devise*)$ bundle install --without production
~/workspace/democritus(devise*)$ bundle update
~/workspace/democritus(devise*)$ rails s
以下のようなエラーが発生するようになった。
Undefined variable: "$grayLight".
(in /home/action/workspace/democritus/app/assets/stylesheets/custom.css.scss:51)
■ エラー修正
"grayLight sass"でググると、bootstrap-sassのgithubのissuesが出てきたので、以下を参考に修正を行った。
After update to 3.0.0 - Undefined variable: "$grayLight". #463
custom.css.scss
@import "bootstrap";…h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
// color: $grayLight;
color: $gray-light;
}…footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
# color: $grayLight;
color: $gray-light;
a {
color: $gray;
&:hover {
# color: $grayDarker;
color: $gray-darker;
}
}…
でんででーん、でででん(東宝版スパイダーマンの登場シーンのリズムで)
■ ヘッダーの修正
classの内容がbootstrap2と3では変わっているらしいので、bootstrap公式サイトを参考にしてヘッダーを総取替えした。
app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</div> <!-- /. navbar-collapse -->
</div> <!-- /. container -->
</header>
タイトルにnabvar-brandクラスを設定したのでCSSも修正した。よくわからないが、.navbar-brandのフォントカラーを白に設定しても適用されないので、"!important"を付けたら色が変更された。
app/assets/stylesheets/custom.css.scss
/* header */.navbar-brand {
color: white !important;
font-weight: bold;
font-size: x-large;
text-transform: uppercase;
&:hover {
color: white;
text-decoration: none;
}
}/ * #logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
}
} */
こっそりログインボタンを修正しつつ、以下の通りに修正を行った。
「ようこそ」の部分は、bootstrap3では、旧バージョンの".hero-unit"クラスが廃止されたのでおかしくなっている。ホームの該当箇所を代替クラスの"jumbotron"に修正する。
app/views/static_pages/home.html.erb
<div class="center jumbotron">
<h1>ようこそ!Democritus へ</h1> <h2>このアプリケーションは、Railsビギナーによるテスト用アプリケーションです。
</h2> <%= link_to "アカウントを作成", new_user_registration_path, class: "btn btn-primary btn-lg" %>
</div>
フォントもおかしくなっているので、CSSを少し修正した。
$font-family-sans-serif: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
@import "bootstrap";…
/* typography */
…
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: x-large;
}…
ようやくホームの修正が完了。