How to include CSS file in Symfony 2 and Twig

Question

I m playing around with Symfony2  and I have problems including CSS and JS files in Twig template  I have a bundle named Webs HomeBundle inside which I have HomeController with indexAction that renders a twig template file  public function indexAction         return  this- gt render  quot WebsHomeBundle Home index html twig quot       So this is easy  Now what I want to do  is to include some CSS and JS files inside this Twig template  Template looks like this   lt  DOCTYPE html gt   lt html gt   lt head gt           block stylesheets             lt link href  quot    asset  css main css      quot  type  quot text css quot  rel  quot stylesheet quot    gt         endblock     lt  head gt   lt body gt   lt  body gt   lt  html gt   The file I would like to include  main css file is located in  Webs HomeController Resources public css main css  So my question is basically  how the hell do I include simple CSS file inside Twig template  I m using Twig asset   function and it just doesn t hit the right CSS path  Also  I run this command in console  app console assets install web  This created a new folder  web bundles webshome      this is just linking to the src Webs HomeController Resources public   right  Questions  Where do you place your asset files  JS  CSS  and images  Is it OK to put them in Bundle Resources public folder  Is that the right location for them  How do you include these asset files in your Twig template using asset function  If they are in public folder  how can I include them  Should I configure something else

User · Accepted Answer

You are doing everything right  except passing your bundle path to asset   function   According to documentation - in your example this should look like below      asset  bundles webshome css main css        Tip  you also can call assets install with --symlink key  so it will create symlinks in web folder  This is extremely useful when you often apply js or css changes  in this way your changes  applied to src YouBundle Resources public will be immediately reflected in web folder without need to call assets install again    app console assets install web --symlink   Also  if you wish to add some assets in your child template  you could call parent   method for the Twig block  In your case it would be like this      block stylesheets           parent            lt link href     asset  bundles webshome css main css       rel  stylesheet  gt     endblock

User · Answer

And you can use  stylesheets   assetic feature  tag      stylesheets       MainBundle Resources public colorbox colorbox css        kerner root dir  Resources css main css      lt link type  text css  rel  stylesheet  media  all  href     asset url       gt     endstylesheets      You can write path to css as parameter   parameter name     More about this variant  http   symfony com doc current cookbook assetic asset management html

User · Answer

In case you are using Silex add the Symfony Asset as a dependency   composer require symfony asset   Then you may register Asset Service Provider    app- gt register new Silex Provider AssetServiceProvider    array       assets version    gt   v1        assets version format    gt    s version  s        assets named packages    gt  array           css    gt  array               version    gt   css2                base path    gt    DIR        public html resources css                      images    gt  array               base urls    gt  array                   https   img example com                                        Then in your Twig template file in head section    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  UTF-8  gt         block head         lt link rel  stylesheet  href     asset  style css         gt         endblock     lt  head gt   lt body gt    lt  body gt   lt  html gt

User · Answer

The other answers are valid  but the Official Symfony Best Practices guide suggests using the web  folder to store all assets  instead of different bundles      Scattering your web assets across tens of different bundles makes it   more difficult to manage them  Your designers  lives will be much   easier if all the application assets are in one location       Templates also benefit from centralizing your assets  because the   links are much more concise        I d add to this by suggesting that you only put micro-assets within micro-bundles  such as a few lines of styles only required for a button in a button bundle  for example

[symfony] How to include CSS file in Symfony 2 and Twig?

Examples related to symfony

Examples related to twig