With Assetic / Twig / Symfony2, can I define front end libraries?

assetic, symfony, twig

Solution

Although there is indeed support for defining front-end libraries, there is unfortunately no support for dependency resolving. You must also define your CSS and JavaScript separately.

What I have been doing, is creating a separate file in `/app/config/` called `assets.yml` and including it in the main configuration to keep things clean.

assetic:
    assets:
        jquery:
            inputs:
                - '%kernel.root_dir%/Resources/public/js/jquery.js'
                - '%kernel.root_dir%/Resources/public/js/jquery-ui.js'
        my_lib:
            inputs:
                - '%kernel.root_dir%/Resources/public/js/my-custom-lib.js'
                - ...

Note that ´%kernel.root_dir%´ resolves to the `app` directory by default in Symfony2. You may now use the assets in your Twig templates.

{% block javascripts %}
    {% javascripts '@jquery' '@my_lib' output="js/jquery.js" %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

The same could be done for CSS files. The example also demonstrates why it's not possible to define CSS and JavaScript as a single asset.

Problem

I'm using Symfony2, with Assetic and Twig. I have various frontend libraries - Backbone, jQuery, jQuery UI, and Bootstrap. Both Bootstrap and jQuery UI include CSS and JS files. Is there a way that I can define the resources they need to include (including dependencies), and then in Twig / Assetic just include all those resources in one tag? What I'd look to have is something like: ``` // config.yml <!-- DOES NOT WORK --> assetic: resources: jquery: js: /filepath/to/jquery.js jquery_ui: dependencies: jquery css: /filepath/to/jqueryui.css js: /filepath/to/jqueryui.js less: js: /filepath/to/less.js bootstrap: dependencies: { less, jquery } js: /filepath/to/bootstrap.js css: /filepath/to/bootstrap.css backbone: dependencies: { jquery } js: { /filepath/to/underscore.js, /filepath/to/backbone.js } // view.html.twig {% use jquery_ui %} {% use bootstrap %} // outputs all js and css for jQuery, jQueryUI, Less, Backbone, and Bootstrap ``` I found a couple of related questions: - How to define Assetic resources in Symfony 2 yml or xml configuration file? - Symfony2 Assetic + Twig Template JavaScript Inheritance but neither seems to involve defining the resources in config.yml. Instead, they define them in `base.html.twig` but that's what I'm trying to avoid. I tried using the `use` tag in Twig, by defining a template called 'jquery_ui' and using `{% stylesheets %}` and `{% javascripts %}` in that block and then in `base.html.twig` putting `{% use "jquery-ui.html" %}`. However, `use` won't import the template because it has a body.

Original source

Related problems