Pokud vyvíjíte webovou aplikaci na rámci Laravel, pravděpodobně budete chtít použít CSS ke stylizaci svých webových stránek. V této podrobné příručce se podíváme na různé způsoby připojení CSS k Laravelu a pomůžeme vám vybrat ten nejvhodnější.
Existuje několik způsobů, jak připojit CSS do Laravel. Jedním z nejjednodušších způsobů je použití vestavěných příkazů rámce k připojení stylů. Odkazy na externí soubory CSS můžete přidat přímo do souboru blade, který zobrazuje vaši webovou stránku. To je zvláště užitečné, pokud máte specifické styly pouze pro tuto stránku.
CSS můžete také připojit pomocí vestavěné funkce Laravel-mix . Mix vám umožňuje kombinovat a minimalizovat soubory CSS, což zlepšuje výkon vašeho webu. Mix můžete použít v souboru webpack.mix.js a poté spusťte příkaz npm run dev, abyste zkompilovali původní soubory do koncového CSS souboru.
Bez ohledu na zvolenou metodu pamatujte, že vaše soubory CSS byste měli uložit do podadresáře public vašeho projektu Laravel. Tímto způsobem je budete moci oslovit prostřednictvím public . Nyní, když jste obeznámeni s různými způsoby připojení CSS v Laravel, můžete si vybrat nejpohodlnější a nejefektivnější pro váš projekt.
Jak připojit CSS v Laravel
Připojení CSS k Laravelu probíhá pomocí funkce asset, která vytváří URL odkaz na cestu k souboru CSS.
Chcete-li začít , vytvořte soubor CSS ve složce public/css, například style.css .
Poté otevřete soubor šablony, ve kterém chcete připojit CSS, a pomocí funkce asset vytvořte odkaz URL na soubor CSS:
>" rel="stylesheet">Funkce asset ('CSS/style.CSS') vytvoří URL odkaz na cestu public / css / style.css .
Nyní bude soubor CSS úspěšně připojen k vaší aplikaci Laravel a použije styly na příslušné prvky na webové stránce.
Krok 1: Vytvoření souboru CSS
Doporučujeme vytvořit soubor se styly v adresáři "public / css" vašeho projektu Laravel. Tento přístup umožňuje oddělit styly od jiných souborů a zajistit jejich dostupnost.
Přibližná cesta k vytvoření souboru se styly v Laravel:
- Otevřete složku projektu Laravel
- Přejděte do složky "public"
- Vytvořte složku "css", pokud ještě neexistuje
- Ve složce "css" vytvořte nový soubor s příponou."css"
Váš soubor CSS je připraven a připraven k použití! Nyní do něj můžete přidat styly, které se budou vztahovat na váš Laravel projekt.
Krok 2: Umístění souboru CSS
Soubory CSS jsou obvykle hostovány ve složce public v kořeni projektu Laravel. Složka public je hlavním adresářem pro umístění statických souborů, jako jsou obrázky, JS a CSS soubory. V této složce Laravel automaticky obsluhuje všechny soubory dostupné z webového prohlížeče.
Pokud ještě nemáte složku public v kořeni projektu Laravel, vytvořte ji ručně.
Jakmile máte složku public, vložte do ní soubor CSS. Vytvořte například složku css a do ní vložte soubor styles.css .
Soubor styles.css je nyní k dispozici z webového prohlížeče následující cestou: http://yourdomain.com/css/styles.css , kde yourdomain.com -vaše doména. Dostupnost souboru můžete zkontrolovat pouhým otevřením této adresy ve Vašem webovém prohlížeči.
Nyní, jakmile je váš soubor CSS hostován a přístupný prostřednictvím webového prohlížeče, můžete jej připojit na požadovanou stránku projektu Laravel. Pro připojení souboru CSS použijte značku s následujícími atributy:
- href-označuje cestu k souboru CSS;
- rel-určuje vztah mezi aktuálním dokumentem a souborem, na který attribuute href odkazuje . V našem případě použijte hodnotu stylesheet, protože připojujeme stylový soubor;
- type-určuje typ obsahu připojeného souboru. Pro soubory CSS použijte hodnotu text / css .
Příklad kódu pro připojení souboru CSS:
Vložte tento kód do tagu vašeho HTML dokumentu. Nyní se styly definované ve vašem souboru CSS budou vztahovat na vaši stránku Laravel.
Krok 3: Připojte soubor CSS k souboru Laravel
Chcete-li připojit soubor CSS k Laravel, budete potřebovat několik kroků:
- Vytvořte nový adresář ve složce public vašeho projektu Laravel. Říkejte jí "css". V této složce bude uložen váš soubor CSS.
- Vložte soubor CSS do nově vytvořené složky "css". Pojmenujte soubor podle svých preferencí, například "styles.css".
- Otevřete soubor " app.blade.php "ve složce" resources/views / layouts" vašeho projektu Laravel.
- Vyhledejte sekci "v souboru" aplikace.blade.php " a přidejte následující kód:
Všimněte si, že k odkazu na cestu k souboru CSS používáme funkci "asset". Pomůže Laravel správně určit cestu i během vývoje a během nasazení webu.
Poté bude váš soubor CSS připojen ke každé stránce vašeho projektu Laravel, která používá šablonu " app.blade.php". Do souboru "styles" můžete přidat své styly.css " a budou se vztahovat na váš projekt Laravel.
Krok 4: Kontrola připojení CSS
Jakmile úspěšně připojíte soubory CSS k vašemu projektu Laravel, je důležité zkontrolovat, zda skutečně fungují. V tomto kroku se podíváme na několik způsobů, jak zkontrolovat připojení CSS.
1. Otevřete webovou stránku, na kterou chcete použít styly CSS. Pokud byl CSS úspěšně připojen, měli byste vidět, že styly se vztahují na vaši stránku. Pokud jste například přidali styl pro změnu barvy textu, ujistěte se, že se text na webové stránce změnil podle vašeho CSS.
2. Ke kontrole připojení CSS použijte nástroje pro vývojáře webového prohlížeče. Většina oblíbených prohlížečů, jako je Chrome, Firefox a Safari, nabízí vývojářské nástroje, které vám umožní zkontrolovat prvky webové stránky a jejich použité styly. Otevřete vývojářské nástroje, vyhledejte požadovanou položku na webové stránce a ujistěte se, že jsou použity požadované styly.
3. Zkontrolujte kód HTML stránky. Otevřete zdrojový kód webové stránky (obvykle dostupný prostřednictvím kontextové nabídky pravého tlačítka myši nebo klávesové zkratky Ctrl+U) a ujistěte se, že cesty k souborům CSS jsou správně uvedeny a jsou připojeny k vaší stránce. Pokud jsou cesty zadány nesprávně nebo nejsou připojeny soubory, budete muset tyto problémy opravit.
4. Zkontrolujte chyby připojení CSS v konzoli prohlížeče. Otevřete konzolu vývojáře webového prohlížeče (obvykle k dispozici prostřednictvím vývojářských nástrojů) a zkontrolujte, zda nejsou nějaké chyby související s připojením souborů CSS. Pokud se vyskytnou chyby, přečtěte si jejich popis a opravte problém.
Postupujte podle těchto kroků a zkontrolujte, zda jsou soubory CSS správně připojeny k vašemu projektu Laravel. Pokud něco nefunguje, zkontrolujte cesty k souborům, jejich správnost a chyby v konzoli prohlížeče. Užijte si CSS připojení!