Run CSS File Through Twig When Using {% Stylesheets %} Tag in Twig with Symfony2

How to include CSS file in Symfony 2 and Twig?

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

html twig file can't find the path to my css file in Symfony app

With Webpack Encore

You should not write your <link>-tag yourself and instead use the commented encore_entry_link_tags instead. The encore_entry_link_tags will make sure it points to the file generated by Webpack Encore (after calling yarn encore dev for example).

When you use Webpack Encore use the webpack.config.yaml to point to your CSS in assets using addEntry('app', ...file..) (or possibly addStyleEntry, but addEntry should be fine). Webpack Encore takes the file under assets/styles/app.css and then puts it in public/ by default public/build. Depending on your configuration it might be, that your file name will not stay the same during that process. The good thing is Webpack Encore usually takes care of everything for you. (If not feel free to open a question for that).

See also: https://symfony.com/doc/current/frontend/encore/simple-example.html

When not using Webpack Encore

You should use forward slashes, e.g. assets/styles/app.css. If you don't use Webpack Encore then you should make sure that you have the file in public/assets/styles/app.css to make it accessible for your browser. You should also wrap this into another helper function called asset. In other words it should look something like (assuming the path is correct):

<link rel="stylesheet" href="{{ path('assets/styles/app.css') }}" type="text/css">

What this will do is make sure that your path is relative to the document root (your public/-directory) instead of relative to the url. This is important, because otherwise your path will not have the same result depending on whether you are for example on https:/example.com vs. https://example.com/blog, because it will look for your css in different places (either public/assets/styles/app.css or public/blog/assets/styles/app.css).

Symfony2 Twig template - css not loading

First execute app/console assets:install ( consider adding --symlink ). The command will copy/symlink all your bundle's Resources/public to web/bundles and create a folder in there named as the lowercase bundle-name without a trailing "Bundle".

example:

YourAwesomeBundle\Resources\public\css\style.css will be copied/symlinked to web\bundles\yourawesome\css\style.css

... afterwards include the assets using asset("@YourBundle/Resources/public/css/style.css")

... or asset("bundles/your/css/style.css")

How to use base css file using twig

If your primary layout that you're extending is in app/Resources/views you can use something like this:

{% stylesheets
    '../app/Resources/public/css/base.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Css not aplied to page in Symfony?

Your css/style.css is linked relative to current URL. So it works on mainpage but not for any subpage URL (In Symfony this means any controller with @Route other than /).

So if You open https://your.domain.tld/, browser would read style.css from https://your.domain.tld/css/style.css. But if You open https://your.domain.tld/adopt/, browser try to read style.css from https://your.domain.tld/adopt/css/style.css.

In Symfony this could be fixed by using

<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />

instead of:

<link href="css/styles.css" rel="stylesheet">

Please, read Creating and Using Templates: Linking to Assets

Rendering a CSS file using Twig

You say that you get the correct contents, but it's not interpreted as css. This could be because of an incorrect contenty-type header.

Css files should be sent as text/css, in Sf the default is text/html. In the action that renders your css make sure to set the correct header.

---

Related Topics