How to reference named Assetic assets in a Twig template?

StackOverflow https://stackoverflow.com/questions/21242161

  •  30-09-2022
  •  | 
  •  

Question

AsseticBundle gives a possibility to define named assets in the Symfony's configuration file. How can I reference them in Twig templates, with {% javascripts %} and {% stylesheets %} Twig tags?

Symfony's own Assetic documentation mentions only special notation for @BundleName/Resources/file.cs to include bundle assets, but tells nothing about the named assets.

Question Symfony2: How to properly include assets in conjunction with Twig template inheritance? has a short mention in the comments that this is possible, but does not tell how to do it.

Using only the asset's given name (like jquery in the Assetic's own Readme) does not work. Assetic tries to look the file web/jquery that apparently does not exist.

Was it helpful?

Solution

The short version: Use "@name" in your templates:

The longer version:

If your assetic configuration looks like this :

[config.yml]
assetic:
    assets:
        bootstrap_css:
                inputs:
                    - %kernel.root_dir%/../web/components/bootstrap/css/bootstrap.css
                    - %kernel.root_dir%/../web/components/bootstrap/css/bootstrap-theme.css
        jquery_ui_css: 
            ....

Now you can use this in your templates, for example in your base.html.twig

<html><head>
...
{% stylesheets output='compiled/main.css'
    "@bootstrap_css"
    "@jqueryui_css"
    ...etc
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
</head></html

This one also defines that all css that is in there should be concatenated into one main.css file in the compiled directory.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top