How to include css from resources folder in symfony 2

Question

I hvae the css located in

app/Resources/FOSUserbundle/css

How can i include that in my twig template

The reason i am putting css there is that my all overridden FOSUser templates in in that folder. So i want to keep css , js images all in there so that if i need to use in other website i just copy that folder

Answer 1

I'm not quite sure how you would include that in your TWIG templates, but ...

1) I put the resources I use in several bundles / projects in the web/ directory. Then you can reference then like this:

{% stylesheets 'css/styles.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

2) If you need to override the FOSUserbundle anyway, you can put the resources inside the inheriting bundle, referencing them like this:

{% javascripts '@YourBundle/Resources/public/js/scripts.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Answer 2

What you have done is perfectly all right.

Just do the following:-

$ app/console assets:install web

It will install the assets in the public "web" directory, where the assets should technically be, to be used with your Twig Templates.

Assets can then be used within Twig templates like this:-

    {% block stylesheets %}
        <link href="{{ asset('/css/main.css') }}" type="text/css" rel="stylesheet" />
    {% endblock %}


    {% block javascripts %}
        <script src="{{ asset('/js/main.js') }}" type="text/javascript"></script>
    {% endblock %}

Answer 3

Although the question suggests and override case, it also aks for a case where the css or js are in a common folder, away from the bundle structure.

One answer is to use the available twig variables. For example if I have one css file located here

app/Resources/views/clientSite/customFolder/css/mycss.css

I can load in any template using something like this (note the example overrides the full stylesheets block, but not required, the stylesheet twig tag can be added in any block):

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets '%kernel.root_dir%/Resources/views/clientSite/customFolder/css/mycss.css'
    %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %} 
{% endblock %}

Also remember to execute the assetic:dump command, so symfony knows it had to publish the css to the web/css folder with all the other files.