Including Assets (CSS, JS) in Symfony 4 / Twig Template

Question

Im learning Symfony and trying to set up a boilerplate app in Symfony 4

This Symfony document describes how to include assets in your page, namely using the asset package like so..

<img src="{{ asset('images/logo.png') }}" alt="Symfony!" />

<link href="{{ asset('css/blog.css') }}" rel="stylesheet" />

I have installed this package and trying to link to a css file in my /public directory.

I know Symfony recommends placing assets in an /assets folder at the root, but I would like to avoid this if possible. It makes more sense to me to place assets in the public directory.

My Twig base template is as follows:

<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>

        {% block stylesheets %}
            <link href="{{ asset('public/css/main.css') }}" rel="stylesheet" />
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
    <footer>footer</footer>
</html>

Problem

When I load the route/page/template, the linked css is rendered as a simple link from the root (as if Im linking it as <link href="public/css/main.css" rel="stylesheet" /> - there is of course no route set for public/* and this returns 404/Not Found.

Its as if the asset() function is not even used.

Ive tried

Restarting my local Symfony server
moving the asset to an assets folder at the root at adjusting the link accordingly
verifying that the asset package was installed (it is)
googling this issue (nothing for Symfony 4)

Questions

How can I let Symfony know that the public/* path is a filesystem path to assets, NOT a URL route, and include my assets successfully?
Is there such a feature to set a default location for assets other than the recommended /assets folder at the root?

simshaun · Accepted Answer · 2018-02-21 18:54:54Z

20

Paths in the asset function should be relative to your public directory, not the project root.

So, pretending your server's docroot is public_html, and an asset is in public_html/css/main.css, the asset call would be {{ asset('css/main.css') }}.

Additional note: The asset function doesn't give you the ability to put assets outside the public directory. They must be in the public directory.

answered Feb 21, 2018 at 18:54

simshaun

21.5k1 gold badge60 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zoore Over a year ago

I dont get it. Before symfony 3.4 it was easy. In symfony 3.4/4 is horrible symfony.com/doc/current/frontend/encore/simple-example.html I have to put assets in public - ok. but then instal another dependency manger, build configs, and those configs load into twig... Bad idea.

simshaun Over a year ago

@zoore That is only if you choose to use Encore. You do not have to. Twig's asset function remains the same. Also, those configs do not "load into Twig". You're just using asset in Twig to point to where Encore builds assets, same as any other static asset.

simhumileco · Accepted Answer · 2020-08-16 12:53:10Z

2

Firstly maybe you have to add the asset functionality to Symfony:

composer require symfony/asset

Then you should to use in Twig temlate the relative path to your public directory:

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

for the public/css/style.css style file.

BTW it is also works for Symfony 5.

answered Aug 16, 2020 at 12:53

simhumileco

35.3k18 gold badges148 silver badges125 bronze badges

Comments

bab2715 · Accepted Answer · 2019-12-16 19:17:32Z

0

Check if webpack is watching files ... (yarn watch) After hours of searching for an answer one of my project team members asked if I had that running ={ Worked immediately after that.

answered Dec 16, 2019 at 19:17

bab2715

1

Collectives™ on Stack Overflow

Including Assets (CSS, JS) in Symfony 4 / Twig Template

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related