Laravel5.7~にAdminLTE3を導入
はじめに
わざわざ記事に書くほどの情報量でもないんですが、いつも調べるのがめんどくさいのと、意外とジャストな記事がないのでメモ書きします。
前提:Laravel 5.7以降のBootstrapについて
Laravelでは初期状態でBootstrapが含まれていますが、5.7以降で使用されているBootstrapのバージョンが3 -> 4になりました。これに伴い、BootstrapベースのAdminLTEをそのまま使おうとするとなんかうまいこといかなくなりました。
なぜうまくいかないのか
現在のlatestバージョンであるAdminLTE v2(2019/9/24現在、2.4.18)はBootstrap4に対応していません。Bootstrap4対応バージョンであるAdminLTE v3は現在rcバージョンであり、
npm install admin-lte@3.0.0-rc.1 --save-dev
もしくは
npm install admin-lte@v3-latest --save-dev
のようにバージョン指定をしないと使用できません。
結論として
npm install
時にバージョンを指定してやればいいだけなのでそんなに難しい話ではないです。ちゃんとバージョン指定しましょう。あとこれはついでなんですが、npm install
後の流れを説明すると、resource/js/app.js
に
window.$ = window.jQuery = require('jquery'); require('admin-lte');
resource/sass/app.scss
に
@import '~admin-lte/dist/css/adminlte.min.css';
を追記し、npm run dev
とかしてやると完成です。HTML内でjs/app.js
およびcss/app.css
を読み込んであげましょう。
ちなみに
AdminLTE v3が正式リリースとなり、v3がlatest vesionに置き換えればこの問題はなくなるかと思います。代わりに今度はLaravel 5.6以下でAdminLTEを使う場合はバージョンの指定をしてやる必要が出てきそうです。