tsyama記

プログラミングとそのほか

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を使う場合はバージョンの指定をしてやる必要が出てきそうです。