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->render("WebsHomeBundle:Home:index.html.twig");
}
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:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
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?
Best 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:
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 applyjs
orcss
changes (in this way your changes, applied tosrc/YouBundle/Resources/public
will be immediately reflected inweb
folder without need to callassets:install
again):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: