Search code examples
phpcsssymfonyassetsassetic

Symfony Twig Stylesheets


Within my project setup i'm having this directory structure for css files: css folder structure

Within my base.html.twig file i'm loading those files like this:

{% block stylesheets %}
    {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

But somehow the css files within my two folders aren't found. How would one get those css be included too?


Solution

  • The way you're doing this right now doesn't look recursive. So the folders FontAwesome and SimpleLintFont won't be included. To fix this i'm copying the stylesheets block for every subfolder like this:

    {% block stylesheets %}
        {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}
    {% block stylesheets %}
        {% stylesheets 'bundles/app/css/FontAwesome/*' filter='cssrewrite' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}
    {% block stylesheets %}
        {% stylesheets 'bundles/app/css/SimpleLineFont/*' filter='cssrewrite' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}
    

    As this is ugly and duplicate code one could combine the paths like this cleaner solution:

    {% block stylesheets %}
        {% stylesheets 'bundles/app/css/*' 'bundles/app/css/SimpleLineFont/*' 'bundles/app/css/FontAwesome/*' filter='cssrewrite' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}