17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrap 4 を Laravel mix で使う方法

Last updated at Posted at 2017-12-10

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

各種設定

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');

これだけです。

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

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

17
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?