Edited at

Laravel 5.5 で bootstrap-honoka を使うための webpack.mix.js

More than 1 year has passed since last update.


TL;DR

まずは webpack.mix.js で、必要なアセットのコピーとインクルードパス設定を施す。


webpack.mix.js

mix..js('resources/assets/js/app.js', 'public/js')

.copyDirectory('node_modules/bootstrap-honoka/dist/fonts', 'resources/assets/fonts')
.copyDirectory('node_modules/bootstrap-honoka/dist/js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
includePaths: [
"node_modules/bootstrap-sass/assets",
"node_modules/bootstrap-sass/assets/stylesheets"
]
});

resources/assets/js/bootstrap.js でbootstrap-sass を読み込むのをやめる。


resources/assets/js/bootstrap.js

  try {

window.$ = window.jQuery = require('jquery');

// 削除するなりコメントアウトするなり
- require('bootstrap-sass');
} catch (e) {}


require('bootstrap-honoka') に変えても honoka 由来の bootstrap 本体の JS は読まれません。詳しくは補足を参照。

仕上げに、 bootstrap-honoka からコピーした JS を読むようにする。


resources/views/layouts/app.blade.php

  <!-- Scripts -->

<script src="{{ asset('js/app.js') }}"></script>
+ <script src="{{ asset('js/bootstrap.min.js') }}"></script>


やりたかったこと

_variables.scss の変数をちょっと変更しつつ bootstrap-honoka を使いたかった。

具体的にはこんな感じ


resources/assets/sass/app.scss

@charset "UTF-8";

// 変更した変数があるパーシャルSASSファイル
@import "variables";

// bootstrap-honoka
@import "~bootstrap-honoka/scss/bootstrap";


ところがデフォの webpack.mix.js は最小限のため、


  • フォントファイルが解決されない


    • Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot'



  • 依存する bootstrap-sass の SASS ファイルが解決されない


    • File to import not found or unreadable: bootstrap/mixins.



と言った問題が起こります。

記事冒頭のようにインクルードパスを通してやることで解決できるようになり、ビルドが通ります。


補足

冒頭のコードでは public/js/bootstrap.min.js を Blade テンプレートの下の方で読み込んでいました。

ここについて説明します。

標準状態では app.jsrequre('./bootstrap') してます。


resources/assets/js/app.js

/**

* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/

require('./bootstrap');

window.Vue = require('vue');


名前が Twitter Bootstrap と紛らわしいですが、モジュール名ではなくパス表記であるのを見ても分かる通り require('./bootstrap') は Twitter Bootstrap を読んでるわけではないです。

この ./bootstrap の中を見てみます。


resources/assets/js/bootstrap.js

/**

* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/

try {
window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');
} catch (e) {}


jquery と bootstrap-sass を require してます。

この require('bootstrap-sass') によって


node_modules/bootstrap-sass/package.json

"main": "assets/javascripts/bootstrap.js"


に従って node_modules/bootstrap-sass/assets/javascripts/bootstrap.js が読まれます。

これによって <script> タグでロードしなくても Twitter Bootstrap の JS が動くようになっています。

(より正確には node_modules/bootstrap-sass/assets/javascripts/bootstrap.js が展開・コンパイルされて app.js に入る)

上に引用したコメントに「ここでロードしてるけど必要に応じて変更していいよ」とある通り、ここは要件に応じて自由に変更できます。

それならばと require('bootstrap-honoka') とかやりたくなるところですが、 これは動きません。

投稿現在 bootstrap-honoka v3.3.7-a では package.json"main": "Gruntfile.js" と定義されている ため、 require しても bootstrap.js を取り込むことが出来ません。

そのため、配布される JS も bootstrap-honoka 由来のものに差し替えたいのであれば


resources/assets/js/bootstrap.js

  try {

window.$ = window.jQuery = require('jquery');

- require('bootstrap-sass');
} catch (e) {}


ここをコメントアウトなり削除なりして、別途 public/js/bootstrap.min.js にコピーしたものを読み込む必要があります。

なお、 diff を取ってみるとわかりますが

bootstrap-sass v3.3.7 の assets/javascripts/bootstrap.js

bootstrap-honoka v3.3.7-a のdist/js/bootstrap.js完全に同一 です。

なので実は require('bootstrap-sass') のままでも動いてくれますが

「honoka に差し替えたのに JS だけ本家のモジュール読むのはキモい・・・」

という場合は、冒頭のように明示的に bootstrap-honoka のほうをロードするのが良いでしょう。


以上です