Laravel5.8でMaterial Design for Bootstrapを使う

意外とインストールのやり方を記載している日本語の記事が少なかったので、自分用のメモも兼ねてnoteを残します。今回はMaterial Design for Bootstrapを使用します。

実行環境
Laravel 5.8.35
Node 10.12.0
npm 6.4.1

mdbootstrapのインストール

はじめにnpm経由でmdbootstrapをインストールします。

$ npm install mdbootstrap

bootstrap.jsの編集

/resources/js/bootstrap.jsの13行目あたりを編集します。

window._ = require('lodash');window._ = require('lodash');

/**
* 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.Popper = require('popper.js').default;
   window.$ = window.jQuery = require('jquery');

   require('bootstrap');
   require('mdbootstrap'); // こいつを追加！
} catch (e) {}

app.scssの編集

/resources/scss/app.scssの9行目あたりを編集します。

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~mdbootstrap/scss/mdb.scss'; // こいつを追加

ビルド

最後にビルドしてあげましょう。

$ npm run dev

bladeビューにてapp.jsとspp.cssを読み込むことを忘れずに。