Laravel Bootstrap

• Szerző: Sallai András
• Copyright © Sallai András, 2021
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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.

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

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

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

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

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

npm run watch

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

php artisan serve

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.

webpack.mix.js

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