📝

MDB - Material Design for Bootstrapの導入

に公開
Bootstrap
mdb
tech

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

Discussion