Laravel で Honoka を使う

2020年3月24日2020年10月26日

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 のコンパイルを行います。