Mengubah Versi Bootstrap ke 3.7 pada Laravel 5.6 dan 5.7

Photo by Pankaj Patel on Unsplash

Pada Laravel versi 5.6 dan 5.7 secara default menggunakan Bootstrap versi 4. Beberapa masalah mungkin akan terjadi bila halaman website yang dikembangkan menggunakan Bootstrap 3, namun versi Bootstrap yang terinstall tidak sesuai dengan yang ada pada module project Laravel terbaru.

Biasanya teman-teman mengalami kasus ini saat akan mengembangkan website yang sudah disediakan halaman template yang akan digunakan. Misalnya, teman-teman berencana menggunakan Laravel versi terbaru, namun halaman template yang diberikan masih menggunakan versi 3.7. Kalau teman-teman coba menjalankan template menggunakan asset hasil output dari Laravel mix (app.css), tentu hasilnya tidak akan sesuai dengan yang diinginkan karena Bootstrap 3 dan 4 sudah mengalami banyak perubahan.

Nah, saya tertarik membuat tulisan ini karena saya pernah mengalami seperti contoh di atas sekaligus pertanyaan di grup Facebook Laravel terkait kasus yang serupa.

Sebenarnya ada beberapa opsi untuk mengatasinya:

  1. Mengubah versi module Bootstrap supaya dapat dicompile Laravel mix.
  2. Menggunakan CDN Bootstrap versi 3.7 secara langsung.
  3. Pilih Laravel versi 5.5 atau sebelumnya.

Nah, di tulisan ini saya tertarik untuk membahas opsi pertama.

Silakan teman-teman buka file package.json lalu ubah sebagai berikut:

// ubah
"bootstrap": "^4.0.0"
// menjadi
"bootstrap-sass": "^3.3.7"

Jalankan perintah npm install untuk mengunduh seluruh node_modules yang dibutuhkan pada package.json.

Kemudian buka resources/assets/sass/app.scss untuk Laravel versi 5.6 dan resources/sass/app.scss untuk versi 5.7, kemudian ubah sebagai berikut:

// ubah
@import '~bootstrap/scss/bootstrap';
// menjadi
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

Masih berada pada folder yang sama, sekarang buka _variable.scss dan ubah seluruh kode di dalamnya menjadi berikut:

Potongan kode di atas saya ambil dari file _variable.scss Laravel versi 5.5.

Kalau kita jalankan perintah npm run dev sekarang..

Hmm.. masih ada warning di sana. Yap, karena Laravel mix berusaha mendapatkan module Bootstrap yang lama, sedangkan pada langkah pertama tadi saya telah mengubahnya dengan module bootstrap-sass. Untuk menyelesaikannya silakan buka file bootstrap.js yangberada di dalam folder js (satu level dengan folder sass sebelumnya).

// ubah
require('bootstrap');
// menjadi
require('bootstrap-sass');
// opsional, teman-teman boleh melakukan comment pada kode Window.Popper, karena bootstrap 3 tidak membutuhkannya
window.Popper = require('popper.js').default;

Setelah selesai dirubah jalankan kembali npm run dev.

Yey, selesai. Pesan warning dan error sudah tidak ditemukan. Mudah-mudahan panduan sederhana ini dapat membantu masalah teman-teman. Selamat mencoba!