< Laravel

Laravel Bootstrap

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Kezdés

Telepítsük a laravel ui modulját:

composer require laravel/ui

Felvesszük a package.json fájlba Bootstrap-et:

php artisan ui bootstrap

Telepítjük, majd futtatjuk a dev scriptet:

npm install && npm run dev

Ha sikertelen, futtassuk újra.

Változások

A resources könyvtárban létrejön egy sass könyvtár, abban egy app.scss fájl. Itt találjuk linkelve a bootstrap-t.

A webpack.mix.js fájl is változik .sass() függvény kerül meghívásra.

link elem

A valami.blade.php fájlban fel kell venni:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Bootstrap konténer

Hozzunk létre div elemet, amely container osztályba tartozik:

<div class="container"> <h1>Helló</h1> </div>

Függőségek

Végül telepítsük a Mix függőséget, majd nézzük meg a projektünekt.

npm install
npm run dev

Megtekintés

npm run watch

Most már megnézhető, ha fut a fejlesztői szerver:

php artisan serve

Bootstrap és CSS együtt

Ha egyszerre szeretnénk használni a Bootstrap és a saját CSS kódunkat, akkor be kell állítani a MIX számára, hogy együtt kezelje azokat. A MIX beállításai a projekt gyökérkönyvtárában a webpack.mix.js fájlban találhatók.

Egészítsük ki a MIX beállításait a .postCss('resources/css/app.css', 'public/css') sorral.

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .postCss('resources/css/app.css', 'public/css') .sourceMaps();

.sass('resources/sass/app.scss', 'public/css')

Bootstrap működéséről gondoskodik

.postCss('resources/css/app.css', 'public/css')

A saját CSS működéséről gondoskodik

.sourceMaps()

A forrás-térképfájlok aktiválásról gondoskodik.

.map kiterjesztésű fájlok.

Hibakereséshez hasznos, de a fordítás teljesítménycsökkenéshez vezet.

Majd futtassuk a npm run dev parancsot, hogy a Laravel vegye tudomásul a változtatást:

npm run dev

További információ:

https://laravel.com/docs/8.x/mix