Подключение CSS через asset в Laravel

Мы уже знаем команду asset для построения URL к файлам в public/. Теперь применим её для CSS. Таблицу стилей подключают в шапке HTML-документа - внутри тега head, чтобы оформление подгрузилось до содержимого страницы.

Для подключения используют тег link с атрибутом rel="stylesheet". Путь к файлу задают через asset в атрибуте href:

<!DOCTYPE html>
<html>
<head>
    <title>{{ $title ?? 'Site' }}</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    {{ $slot }}
</body>
</html>

Такой макет подключают на всех страницах сайта - стили из style.css будут работать везде, где используется этот шаблон.

Сам файл стилей лежит в public/css/style.css. Например, можно задать цвет текста и шрифт для всей страницы:

body {
    color: #333;
    font-family: sans-serif;
}

После сохранения CSS обновите страницу в браузере - изменения должны сразу примениться.

Подключите css/style.css в макете и задайте в CSS цвет фона страницы.

Убедитесь, что стиль применяется и на странице, которая использует этот макет.