Laravel 10 Projesine Bootstrap 5 Ekleme Vite Destekli Npm Kurulum

npm i bootstrap @popperjs/core

İlk Önce Bootstrap ve Popper kurulumunu yapıyoruz

npm i --save-dev sass

Sass kurulumunu –save-dev işareti(flags) ile yapıyoruz. –save-dev sass paketini geliştirme aşamasında kullanacağımızı belirtiyoruz bu sayede sass paketi package.json dosyasında “devDependencies”: altına ekleniyor.

resources klasörünün içine sass isimli bir klasör oluşturup. Bu klasörün içinde de app.scss dosyasını oluşturuyoruz. App.scss içeriği

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Bootstrap
@import 'bootstrap/scss/bootstrap';

şeklinde olabilir.

Laravel ana dizininde bulunan vite.config.js dosyasını açıp

input: ['resources/css/app.css', 'resources/js/app.js'] //sil

aşağıdaki kodla değiştiriyoruz. özetle css/app.css olan yeri sass/app.scss ile değiştiriyoruz.

input: ['resources/sass/app.scss', 'resources/js/app.js'], 

Bu şekilde Vite, sass/app.scss içine yazdığımız stil dosyalarını işleme alacak.
Css ile ilgili işlemler bitti. Bootstrap Javascript dosyasını projemize dahil etmek için resource/js/app.js dosyasının içine aşağıdaki kodu ekleyelim.

import * as bootstrap from 'bootstrap';

// window degiskenine bootstrapi atiyoruz
window.bootstrap = bootstrap;

Bootstrap javascript ekleme işlemi de tamamlandı. Önemli bir ek olarak Bootstrapı <script> veya CDN ile sayfamıza eklemediğimiz için (@Vite direktifi ile ekliyoruz), bootstrap tarayıcının window nesnesinde olmadığından tanımlanmayacaktır. Bunun önüne geçmek için window.bootstrap = bootstrap; kodunu ekledik. Bu sayede Alert, Modal, Toaster gibi bootstrap bileşenleri sayfamızda çalışacaktır. Ayrıca import * as bootstrap from ‘bootstrap’; ile tüm bileşenleri aldık bu performans kayıplarına neden olabilir. Sadece belirli bileşenleri almak için aşağıdaki kullanım daha uygundur.

import { Alert, Button } from 'bootstrap'

window.bootstrap = {
    Alert, Button
}

View dosyasında bootstrap kullanmak için aşağıdaki kodu yazmamız yeterli.

 @vite(['resources/sass/app.scss', 'resources/js/app.js'])

Not : Vite eklentisini çalıştırmayı unutmayın. Konsola npm run dev yazmanız gerekmekte.

Basit Şekilde Laravel Projesine Bootstrap eklemek için buradan.