Rails 5 に yarn で Bootswatch 4 beta 入れた
Rails 4 時代は
maxim/bootswatch-rails: Bootswatches converted to SCSS ready to use in Rails asset pipeline.
にお世話になったけど、Rails 5.1.4 なので yarn を使って Bootswatch 4.0.0-alpha6 を入れてみる。
Bootswatch のバージョン確認してインストール
$ yarn info bootswatch | less yarn info v1.0.2 { name: 'bootswatch', description: 'Bootswatch is a collection of themes for Bootstrap.', 'dist-tags': { latest: '3.3.7', next: '4.0.0-alpha.6' }, versions: [ '3.0.0', '3.2.0', '3.3.0', '3.3.1', '3.3.2', '3.3.4', '3.3.5', '3.3.6', '3.3.7', '4.0.0-alpha.6' ], 以下略
4.0.0-alpha.6 があるので入れる。
$ yarn add bootswatch@4.0.0-alpha.6
Rails に Bootswatch 導入
thomaspark/bootswatch: Themes for Bootstrap
は Bootswatch 3 の情報なので ( 2017-9-23 時点 )、Branch を v4 にする。
/app/assets/stylesheets にある application.scss を application.scss に mv して
@import "bootswatch/theme/variables"; @import "bootstrap/scss/bootstrap"; @import "bootswatch/theme/bootswatch";
と書く。
application.scss に書く
なんのテーマを入れようかな。
Bootswatch: Free themes for Bootstrap
3 に比べて Litera、Lux、Materia、Minty、Pulse が増えてる。3 のテーマに飽きていたので嬉しい。
新しい Litera 試してみる。
@import "bootswatch/litera/variables"; @import "bootstrap/scss/bootstrap"; @import "bootswatch/litera/bootswatch";
反映されていい感じになった。
CSS の微調整
自分の書き方が悪いのか、リンクのホバー時に背景黒でリンク赤とか、a.btn.btn-primary のリンク色が暗いとかあったので application.scss に追記。
ほかに h1 がフォント大きすぎと body に文字くっつきすぎを調整。
h1 { font-size: 1.2rem; } body { padding: 1rem; } a.btn { color: white; } a:hover { background-color: transparent; }
余談
- bootstrap-ruby/rails-bootstrap-forms 使えた
- yarn を高確率で year と typo しがち
- yarn install して yarn add と言われがち
- yarn search ないのが嫌 ( yarn search · Issue #778 · yarnpkg/yarn )