Laravel で Honoka を使う
Honoka は、MIT ライセンスで利用可能な Bootstrap テーマです。通常の Bootstrap と比べて、日本語の表示周りが調整されています。最新バージョンは 4.3.1 で本家 Bootstrap 4.3.1 と互換性があります。
この Honoka を Laravel で使おうとして割とハマったので記録に残しておきます。
Laravel Mix のインストール
Laravel では、CSS や JS のコンパイルに Laravel Mix を利用しています。詳しくはマニュアルを見ていただくとして、とりあえず
で Laravel Mix と依存パッケージをインストールします。
Honoka のインストール
続けて、Honoka をインストールします。
で OK です。
webpack.mix.js の編集
Honoka を読み込むために、webpack.mix.js
を編集します。そのままだと Honoka の sass 内の import のパスが通らないので、includePaths
の設定をしなければならないのですが、sass-loader のバージョン8から、includePaths の設定方法が変わっています。
こんな感じで、includePaths の前に sassOptions
を挟む必要があります。以前のように
と書くと
と怒られます。あと、includePaths は Laravel のインストールディレクトリからの相対パスで記載します。これもドキュメントを発見できずに File to import not found or unreadable
と散々怒られました。。
bootstrap.js、app.sass の編集
上記の webpack.mix.js の編集で、JavaScript については resources/js/app.js
、Sass については resources/sass/app.scss
に記載するように設定しました。app.js については、bootstrap.js を参照するように書かれているだけなので、bootstrap.js を編集します。
bootstrap.js
app.scss
私の場合、laravel/ui を使って、ログイン画面を作っていたので
を実行したことで作成されていた resources/sass/_variables.scss
への参照を削除し、ファイルも削除しています(Honoka の定義と競合するので)。
ちなみに、@import のパス指定でチルダ(~)を付けると、node_modules へのパスに読み替えてくれます。つまり、
みたいに階層をたどる必要がなくなります。
Mix の実行
これで準備ができたので
を実行し、 CSS と JS のコンパイルを行います。
ディスカッション
コメント一覧
まだ、コメントがありません