Bootstrap 4 を Laravel mix で使う方法

タイトルの通りの構成で使うために色々と調べたところ、情報が古かったり、やたら面倒な感じの物が多かったので色々試して落ち着いた方法を記録に残しておきます。

各種設定

package.json の　devDependencies は下記の通り。

"devDependencies": {
    "bootstrap": "^4.0.0",
    "jquery": "^3.2.1",
    "laravel-mix": "^1.7.0",
    "popper.js": "^1.12.9"
  }

webpack.mix.js はこうなります。

let mix = require('laravel-mix');

mix.js('src/main.js', './')
    .autoload({
      "popper.js": ['Popper', 'window.Popper', 'popper', 'window.popper'],
      "jquery": ['$', 'window.jQuery']
    })
    .sass('src/main.scss', './');

スクリプトとスタイルシート

sass ファイルの冒頭

@import "variables";

@import "~bootstrap/scss/bootstrap";

js の冒頭

require('bootstrap');

これだけです。

できてみれば簡単なんですけどね。

結構回り道をしてしまいました。