Стили и скрипты

Сайту нужны стили и скрипты. Laravel использует для них сборщик Vite: он объединяет файлы, сжимает их и мгновенно обновляет страницу при изменениях. Исходники лежат в папке resources, а готовые файлы — в public/build.

Установка

Для сборки нужен Node.js. Зависимости описаны в package.json, который уже есть в проекте:

npm install

Исходные файлы

В vite.config.js перечислены входные файлы:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Подключение в шаблоне

Директива @vite вставляет нужные теги link и script:

<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    {{ $slot }}
</body>
</html>

Режим разработки

npm run dev

Vite запускает свой сервер и следит за файлами. Стоит сохранить стиль или шаблон — страница в браузере обновится сама. Команду оставляют работать в отдельном окне терминала, пока идёт разработка.

Сборка для сервера

npm run build

Команда создаёт сжатые файлы в public/build. В их именах есть хеш содержимого, поэтому после обновления сайта браузеры посетителей сразу загрузят новую версию, а не возьмут старую из кеша. Директива @vite сама подставит правильные имена.

Tailwind CSS

В новых проектах Laravel уже настроен Tailwind — набор готовых классов для оформления прямо в разметке:

<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700">
    Сохранить
</button>

Его подключает одна строка в resources/css/app.css:

@import 'tailwindcss';

Картинки и шрифты

Файлы, на которые ссылаются стили и скрипты, Vite обработает сам. Картинку из шаблона подключают так:

<img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Логотип">

Файлы, которым обработка не нужна, — favicon.ico, robots.txt — кладут в папку public и подключают функцией asset().

Интерактивность

Для страниц, которым нужно больше, чем простой скрипт, есть три пути: Alpine.js — небольшие вставки поведения в разметке, Livewire — интерактивные компоненты на PHP без своего JavaScript, Inertia — полноценный интерфейс на React или Vue с маршрутами и контроллерами Laravel.

Частая ошибка

Если на рабочем сервере не выполнить npm run build, страница откроется без стилей с ошибкой Vite manifest not found. Сборку выполняют при каждом размещении — на сервере или заранее, перед загрузкой файлов. И не запускайте на сервере npm run dev: этот режим только для разработки.