Question

I’m having a hard time dealing with stylesheets and javascripts.

All the examples for assetic + twig assume that you know beforehand all the paths of the files you will need.

Suppose I want to create an ‘About’ page.

The ‘about.html.twig’ template extends from ‘layout.html.twig’.

The layout must have a couple of .css and .js that will be used throughout the entire site.

The about template must load other .css and .js files that are specific to it.

So the stylesheets block looks something like this:

{% block stylesheets %}
{{ parent() }}
<link href='bla'> {# more stylesheets #}
{% endblock %}

Then how do I use assetic in this case?

Am I supposed to send all the assets of the site from the beginning, because even then, the performance will be boosted?

The problem is that there may be conflicts between the .css, sometimes you load a .css just to override your own base settings, so you can’t just create a single .css for the whole site.

I also tried setting an array to store all the paths, then loop, and pass the paths to assetic. But it seems like the syntax css[] = ‘another_path.css’ is not supported by twig. You have to set the entire array in one assignment

Answer 1

Yes you are correct the syntax for the assetic Twig extensions does expect you do know all the assets you want to include. But that is by design because for production it is intended that you dump out the combined and minified CSS/JS so that it can handled by the web server without getting PHP involved.

My best suggestion for you is to identify all your stylesheets that you are happy to include on all pages of your site and make an assetic stylesheet call for them.

Then for specific pages where you need additional stylesheets you could make a second assetic call where required.

layout.html.twig

// do common styles
{% stylesheets 'css/reset.css'
               'css/960.css'
               'css/foobar.css'
               filter='yui_css' %}
    <link rel="stylesheet" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}

// use an empty block for extra styles
{% block extra_styles %}{% endblock %} 

someview.html.twig

{% block extra_styles %}
    {% stylesheets 'css/about1.css'
                   'css/about2.css'
                   filter='yui_css' %}
        <link rel="stylesheet" media="screen" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

Another solution, which is possibly easier, is to just refactor your CSS so you can have all the styles downloaded in one go.