MDB - Material Design for Bootstrapの導入

Bootstrapの導入

npmのインストール

$ yum install epel-release

$ yum install nodejs npm --enablerepo=epel
$ yum install gcc gcc-c++

Laravelの各種設定ファイルを変更

• package.json

"bootstrap-sass": "^3.3.7",
        ↓
"bootstrap": "^4.0.0",

• resources/js/bootstrap.js

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

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

• resources/sass/app.scss

// Bootstrap
// @import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~bootstrap/scss/bootstrap";

bootstrap4をインストール

$ npm install
$ npm install popper.js

エラー発生

npm run dev でエラー発生

1. package.json の cross-env を node_modules/cross-env/dist/bin/cross-env.js に変更
2. rm -rf node_modules
3. rm package-lock.json yarn.lock
4. npm cache clear --force

MDBの導入

静的ファイル(CSS,JS)の配置

1. npm install mdbootstrap を実行
2. npm run devを実行
   • webpack.mix.jsに書いてある内容を元にcss/jsを書き出す
   • 標準では下記の設定がされている
     • resource/js/app.js => public/js
     • resource/js/app.scss => public/css
   • 新たなcss/jsを追加したい場合は、ココに追加する
3. htmlに下記の読み込み処理を追加する

<link type="text/css" href="{{asset('/css/xxx.css')}}" rel="stylesheet">

<script type="text/javascript" src="{{asset('/js/xxx.js')}}"></script>

• npm run devで書き出されるapp.js / app.cssはそれぞれresource/js/app.js、resource/js/app.scssを元にしている

• resource/js/app.jsを下記のように修正することで、書き出されるapp.jsを変更することができる。

require('mdbootstrap/js/mdb');

• resource/js/app.scssを下記のように修正することで、書き出されるapp.cssを変更することができる。

@import '~mdbootstrap/scss/mdb';