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

Стили и скрипты в Symfony подключает AssetMapper. Ему не нужны Node.js и сборка: браузер загружает файлы как модули JavaScript, а Symfony добавляет к их именам версию, чтобы после обновления не показывался старый кеш.

Где лежат файлы

Подключение на странице

{# templates/base.html.twig #}
<head>
    {% block javascripts %}
        {{ importmap('app') }}
    {% endblock %}
</head>

Функция importmap() выводит всё необходимое. Стили подключают из главного скрипта:

// assets/app.js
import './styles/app.css';
 
console.log('Страница загружена');

Картинки

Файл из папки assets выводят функцией asset():

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

В адрес попадёт версия файла: /assets/images/logo-3c16d92m.png.

Сторонние пакеты

php bin/console importmap:require bootstrap

Команда скачивает пакет и записывает его в importmap.php. После этого его импортируют как обычно:

import 'bootstrap/dist/css/bootstrap.min.css';
import { Modal } from 'bootstrap';

Stimulus

Stimulus привязывает небольшие скрипты к разметке. Контроллер — файл в assets/controllers:

// assets/controllers/counter_controller.js
import { Controller } from '@hotwired/stimulus';
 
export default class extends Controller {
    static targets = ['output'];
 
    count = 0;
 
    increment() {
        this.count++;
        this.outputTarget.textContent = this.count;
    }
}

<div data-controller="counter">
    <button data-action="click->counter#increment">+1</button>
    <span data-counter-target="output">0</span>
</div>

Имя файла counter_controller.js даёт имя counter. Регистрировать контроллер не нужно.

Turbo

Пакет Turbo из того же набора загружает страницы без полной перезагрузки: переходы по ссылкам и отправка форм становятся быстрее без единой строки своего JavaScript.

Подготовка к размещению

php bin/console asset-map:compile

Команда копирует все файлы с версиями в public/assets, и веб-сервер отдаёт их напрямую.

Если нужна сборка

Для TypeScript, Sass или React есть другой путь — Webpack Encore или Vite. Они требуют Node.js и шаг сборки, зато поддерживают любые инструменты фронтенда.

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

Если выполнить asset-map:compile на своём компьютере, Symfony начнёт отдавать готовые файлы из public/assets, и изменения в стилях перестанут появляться. Удалите эту папку — и файлы снова будут браться из assets. Команду выполняют только при размещении на сервере.