[[oktatas:web:back-end_framework:laravel|< Laravel]]

====== Laravel Bootstrap ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:

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


===== Bootstrap konténer =====

Hozzunk létre div elemet, amely container osztályba tartozik:
<code html>
<div class="container">
<h1>Helló</h1>
</div>
</code>

===== Függőségek =====


Végül telepítsük a Mix függőséget, majd nézzük meg a projektünekt.
<code>
npm install 
npm run dev
</code>

===== 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.

<code javascript 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();
</code>

  * .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