Question

This is a bit frustrating. According to Symfony best practices, a bundle’s web assets (images, css, js) should be placed in src/vendor/path/to/bundle/Resources/public. Running app/console assets:install copies the contents of that public folder to web/bundles/bundlename. In the official documentation, Twig templates are shown to grab these assets with code like:

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('/css/styles.css') }}
{% endblock %}

When I try it, instead of magically grabbing my assets from web/bundles/bundlename/css/styles.css, it instead just goes for web/css/styles.css. Is this expected behavior? The official documentation is less than clear about this.

In order to try to combat this issue, I tried embracing assetic’s ability to dynamically serve assets. I tried:

{% stylesheets '@mybundle/Resources/public/css/*' %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}

But got the following exception:

An exception has been thrown during the compilation of a template (“You must add mybundle to the assetic.bundle config to use the {% stylesheets %} tag in mybundle:Home:index.html.twig.”) in “/home/kevin/www/src/mybundle/Resources/views/Home/index.html.twig

The official Symfony documentation makes it appear that it should work out of the box with no configuration necessary.

So, TLDR:

1. Am I not understanding how assets should be loaded?
2. How do I address the assetic exception?

Answer 1

To fix the assetic exception you need to configure your bundle in your config.yml like this:

assetic:
    bundles: [ MyAwesomeBundle ]

The {{ asset(...) }} twig function will serve files relative from your web root.

You use app/console assets:install to install static assets within your web root and you can later easily point to them using the asset function like this {{ asset('/mybundle/css/site.css') }}