Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to include CSS file in Symfony 2 and Twig?
    primarykey
    data
    text
    <p>I'm playing around with <strong>Symfony2</strong>, and I have problems including <strong>CSS</strong> and <strong>JS</strong> files in <strong>Twig</strong> template.</p> <p>I have a bundle named <code>Webs/HomeBundle</code> inside which I have <code>HomeController</code> with <code>indexAction</code> that renders a twig template file:</p> <pre><code>public function indexAction() { return $this-&gt;render("WebsHomeBundle:Home:index.html.twig"); } </code></pre> <p>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:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; {% block stylesheets %} &lt;link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" /&gt; {% endblock %} &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The file I would like to include, <code>main.css</code> file is located in: </p> <pre><code>Webs/HomeController/Resources/public/css/main.css </code></pre> <p>So my question is basically, how the hell do I include simple CSS file inside Twig template?</p> <p>I'm using Twig <code>asset()</code> function and it just doesn't hit the right CSS path. Also, I run this command in console: </p> <pre><code>app/console assets:install web </code></pre> <p>This created a new folder</p> <pre><code>/web/bundles/webshome/... </code></pre> <p>this is just linking to the</p> <pre><code>src/Webs/HomeController/Resources/public/ </code></pre> <p>right?</p> <h1>Questions</h1> <ol> <li>Where do you place your <strong>asset</strong> files, JS, CSS, and images? Is it OK to put them in <code>Bundle/Resources/public</code> folder? Is that the right location for them?</li> <li>How do you include these <strong>asset</strong> files in your Twig template using asset function? If they are in public folder, how can I include them?</li> <li>Should I configure something else?</li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload