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.