bootstrap-honoka を Rails5 + webpack 環境に導入する手順

▼Honoka - 日本語も美しく表示できるBootstrapテーマ
http://honokak.osaka/

を Rails5 の webpack 環境に導入する手順です。

1. npm にあるか確認します

$ npm search bootstrap-honoka
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
bootstrap-honoka          | Honoka is one of…    | =windyakin      | 2017-07-29 | 3.3.7-a  | css bootstrap sass scss lovelive web front-end framework theme
bootstrap-rin             | Rin is one of the…   | =raryosu        | 2017-08-01 | 3.3.7-2  | css bootstrap sass scss lovelive web front-end framework theme

ありました。

なお、bootstrap で検索すると出てきません。なぜでしょう？

$ npm search bootstrap | grep bootstrap-honoka | wc -l
0

多すぎると出てこない仕様なのかわかりませんが、当初、見つからないので npm には対応していないものと考えてしまいました。

あと honoka の派生バージョンには umi nico rin の3つがあるのですが npm では rin しか見つかりませんでした。 npm や yarn を使って導入できないパッケージはどのようにして導入したらいいのかよくわかっていません。

とりあえず bootstrap-honoka は npm で見つかったので次に進みます。

2. インストールします

$ yarn add bootstrap-honoka

インストールするので install と書いたらエラーになりました。
実は add だったというのがややこしいところです。

3. application.js で css と js を読み込みます

app/javascript/packs/application.js

import "bootstrap-honoka/dist/css/bootstrap.min.css"
import "bootstrap-honoka/dist/js/bootstrap.min.js"

import ... は require(...) と書いてもよかったです。

4. レイアウトに *_pack_tag を書きます

app/views/layouts/application.html.slim

= stylesheet_pack_tag "application"
= javascript_pack_tag "application"

なお、application.js で css を何も読み込んでない状態で先に stylesheet_pack_tag 行を書いてしまうと /packs/application-xxx.css が見つからない という例外がでてびっくりすることになるのでやや注意です。

これだけです。