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 %}

It's in /Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/css/web.css Or basically... /Symfony/src/Acme/WebBundle/Resources/public/css/web.css — Gretta
– Gretta, Commented Jun 16, 2014 at 20:26
Did you try to clear cache and re-install assets? If you didn't; open your console and type php app/console assets:install web --symlink ---Note: --symlink option is optional. If you want to hardcopy files to your web directory don't use it. — Canser Yanbakan
– Canser Yanbakan, Commented Jun 16, 2014 at 22:01

zizoujab · Accepted Answer · 2014-06-16 21:53:24Z

2

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

answered Jun 16, 2014 at 21:53

zizoujab

7,8108 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tamir · Accepted Answer · 2014-06-16 20:27:00Z

1

{% 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

answered Jun 16, 2014 at 20:27

tamir

3,2972 gold badges35 silver badges52 bronze badges

5 Comments

zizoujab Over a year ago

and don't forget to dump them when going to production php app/console assetic:dump

Gretta Over a year ago

reset.css? What's that? I only made web.css :\

tamir Over a year ago

well then don't use that line.. it was only to show that it can be used for multiple files

Gretta Over a year ago

Okay so I tried doing what you told me and I got this... CRITICAL - Uncaught PHP Exception Twig_Error_Syntax: "An exception has been thrown during the compilation of a template ("You must add AcmeWebBundle to the assetic.bundle config to use the {% stylesheets %} tag in AcmeWebBundle:Default:index.html.twig.") in "AcmeWebBundle:Default:index.html.twig"." at /Applications/MAMP/htdocs/Symfony/app/cache/dev/classes.php line 3124

Gretta Over a year ago

I replaced "asset_url" with "bundles/AcmeWebBundle/css/web.css".

Collectives™ on Stack Overflow

Symfony2: How to link CSS to HTML part?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related