Assets (CSS, JS, bilder) i Symfony med Twig

[mosbth]

För att jobba på rätt sätt med statiska webbresurser såsom stylesheets, javascript-filer och bilder så använder vi säkrast funktionen asset() i våra Twig templatefiler.

Vi tänker oss att vi har en katalogstruktur som ser ut så här.

Så här kan det se ut i base.html.twig för att referera till ovan resurser.

        <link rel="icon" href="{{ asset("favicon.ico") }}">
        <link rel="stylesheet" href="{{ asset("css/style.css") }}"/>

Så här kan det se ut när man inkluderar och länkar till en bild.

<img src="{{ asset("img/mos.png") }}" width="200px" alt="mos">

<a href="{{ asset("img/mos.png") }}">View the image</a>

Installera

För att lyckas med detta behöver du dels installera modulen asset och sedan behöver du konfigurera bort en referens till filen manifest.json, då blir det enklast att komma igång med användandet av asset.

Installera med composer.

composer require symfony/asset

Kommentera bort referensen till manifest.json i filen config/packages/webpack_encore.yaml.

framework:
    assets:
        #json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

Om du missar kommentera bort manifest-filen får du troligen felmeddelandet.

An exception has been thrown during the rendering of a template ("Asset manifest file "public/build/manifest.json" does not exist.").

Läs mer

• The Asset Component
• Twig Extensions Defined by Symfony: asset()