Laravel で Honoka を使う
Honoka は、MIT ライセンスで利用可能な Bootstrap テーマです。通常の Bootstrap と比べて、日本語の表示周りが調整されています。最新バージョンは 4.3.1 で本家 Bootstrap 4.3.1 と互換性があります。
この Honoka を Laravel で使おうとして割とハマったので記録に残しておきます。
Laravel Mix のインストール
Laravel では、CSS や JS のコンパイルに Laravel Mix を利用しています。詳しくはマニュアルを見ていただくとして、とりあえず
npm installで Laravel Mix と依存パッケージをインストールします。
Honoka のインストール
続けて、Honoka をインストールします。
npm install --save bootstrap-honokaで OK です。
webpack.mix.js の編集
Honoka を読み込むために、webpack.mix.js を編集します。そのままだと Honoka の sass 内の import のパスが通らないので、includePaths の設定をしなければならないのですが、sass-loader のバージョン8から、includePaths の設定方法が変わっています。
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
sassOptions: {
includePaths: [
'node_modules',
'node_modules/bootstrap-honoka/scss'
]
}
});こんな感じで、includePaths の前に sassOptions を挟む必要があります。以前のように
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
includePaths: [
'node_modules',
'node_modules/bootstrap-honoka/scss'
]
});と書くと
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'includePaths'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }と怒られます。あと、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
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap-honoka');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';app.scss
// Honoka
@import '~bootstrap-honoka/scss/bootstrap';私の場合、laravel/ui を使って、ログイン画面を作っていたので
php artisan ui bootstrap --authを実行したことで作成されていた resources/sass/_variables.scss への参照を削除し、ファイルも削除しています（Honoka の定義と競合するので）。
ちなみに、@import のパス指定でチルダ（~）を付けると、node_modules へのパスに読み替えてくれます。つまり、
// Honoka
@import '../../node_modules/bootstrap-honoka/scss/bootstrap';みたいに階層をたどる必要がなくなります。
Mix の実行
これで準備ができたので
npm run devを実行し、 CSS と JS のコンパイルを行います。