Symfony2: How to link CSS to HTML part?

Question

I'm new to Symfony2 and all this website development stuff. So I already wrote my code in /WebBundle/Resources/Views/Default/index.html.twig and some CSS code just to test it. The problem is, I don't know how to link the two. I tried looking it up online, but none of it solved my problem. In my index.html.twig file, I tried:

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

and

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

Answer 1

Use assetic :

{% block stylesheets %}
    {% stylesheets
        '@AcmeWebBundle/Resources/public/css/web.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
    {% endstylesheets %}
{% endblock %}

In your config.yml tell symfony that your bundle will use assetic :

assetic:
    bundles:        [AcmeWebBundle]

Finally when passing to production you have to dump your css and/or your js buy executing :

php app/console assetic:dump

Further infos : http://symfony.com/doc/current/cookbook/assetic/asset_management.html

Answer 2

{% block stylesheets %}
    {% stylesheets
        '@AcmeWebBundle/Resources/public/css/web.css'
        '@AcmeWebBundle/Resources/public/css/reset.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
    {% endstylesheets %}
{% endblock %}

Assuming your files web.css, reset.css are located in Acme\\WebBundle\\Resources\\public\\css