動かざることバグの如し

近づきたいよ 君の理想に

Railsに「Honoka」なBootstrapをyarn経由でインストールする

Honokaというじゅりあん(@MITLicense)氏作のBootstrapテーマがある。

Honoka - 日本語も美しく表示できるBootstrapテーマ

サンプルを見てもらうとわかるが、日本語の表示が綺麗になっている。加えて配色も標準と変わってて、Bootstrapの触り心地をキープしつつ少し変わったCSSフレームワークを使いたい場合にはオススメ

で久々に見たらnpm対応してたのでRailsで使ってみる

環境

yarn自体のインストールとrailsのひな壇はできているものとする あとWebpackerは今回使わない

インストール

yarn add bootstrap-honoka

一発。。。

以下のようになればインストール成功

yarn add bootstrap-honoka
yarn add v1.9.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.10.1", while you're on "1.9.4".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 4 new dependencies.
info Direct dependencies
└─ bootstrap-honoka@4.1.3
info All dependencies
├─ bootstrap-honoka@4.1.3
├─ bootstrap@4.1.3
├─ jquery@3.3.1
└─ popper.js@1.14.4
✨  Done in 2.15s.

設定

残念ながらこれだけではCSSは読み込まれない。yarnでインストールしたものはnode_modules以下に配置されるが、Railsではデフォルトではnode_modulesを読まないからである。

ということでCSSを読むように app/assets/stylesheets/application.scssで以下を追加

 *= require bootstrap-honoka/dist/css/bootstrap.min.css

JSも必要な場合は app/assets/javascripts/application.js に以下を追加

//= require bootstrap-honoka/dist/js/bootstrap.min.js

でいける

f:id:thr3a:20181028071137p:plain

めっちゃ簡単 作者に感謝〜