Laravel CSS

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

Kezdés

composer create-project laravel/laravel projekt01
cd projekt01

Szükség van függőségek letöltésére, például nem áll rendelkezésre az mx, amivel megnézhetjük CSS-el beállított weblapunkat. A projekt könyvtárában adjuk ki a következő parancsokat:

npm install 
npm run dev

Folyamatos fordítás

A watch parancs figyeli a változásokat és folyamatosan fordítja a public könyvtárba a a fejlesztés közbeni változásokat.

npm run watch

Nézetfájl

Az adott .blade.php fájlba vegyük fel a következő sort:

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

Ez is működik:

<link rel="stylesheet" href="css/app.css">

JavaScripthez pedig ezt:

<script src="{{ asset('js/app.js') }}"></script>

Megtekintés

Most már megnézhetjük a weblapot. Ha nincs elindítva a szerver:

php artisan serve

CSS

Szerkesszük a resources/css/app.css fájlt.

Legyen egy példa:

h1 {
    background-color: blue;
}

Gondoskodjunk arról, hogy a .blade.php fájl tartalmazzon h1 elemet.