Help us understand the problem. What is going on with this article?

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 のほうをロードするのが良いでしょう。


以上です

hidekuro
雑食。私がQiitaで公開する独自コードは、特に記載がない限り CC0 https://creativecommons.org/publicdomain/zero/1.0/deed.ja とします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away