Home/ Questions/Q 8463995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:36:24+00:00

I’m playing around with Symfony2 , and I have problems including CSS and JS

  • 0

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

  1. 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?
  2. 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?
  3. Should I configure something else?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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() }}

    <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet">
{% endblock %}
    • 0