Including css and js files in symfony 2.5

Question

I am working with symfony 2.5 and while including the css and js files although they seem to work but when i check the source in browser i see multiple css and js files being included where as i only included them once. This is what my header.html.twig looks like

{% block head %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Home | Flat Theme</title>
        {% block stylesheets %}
            {% stylesheets '@DefaultBundle/Resources/public/css/*' %}
            <link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
            <link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
            <link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
            <link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
            <link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>
            {% endstylesheets %}
        {% endblock %}

        {% block topjavascripts %}
            {% javascripts '@DefaultBundle/Resources/public/js/*' %}
            <script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
            <script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
            {% endjavascripts %}
        {% endblock %}
    </head>
{% endblock %}
<body>

Here is the source i see in browser and you will notice each css and js file has been mentioned over 5 times.

I tried removing the @DefaultBundle/Resources/public/css/* from {% stylesheets '@DefaultBundle/Resources/public/css/*' %} but doing that removes all the style

What am i doing wrong?

enter image description here

Shairyar · Accepted Answer · 2014-09-15 12:19:51Z

1

Try this:

{% block head %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home | Flat Theme</title>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
    <link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>

    <script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
    <script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
</head>
{% endblock %}
<body>

Or, if you don't want to call each file explicitly, try this:

{% block head %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home | Flat Theme</title>
    {% block stylesheets %}
        {% stylesheets 'bundles/default/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
        {% endstylesheets %}
    {% endblock %}

    {% block topjavascripts %}
        {% javascripts '@DefaultBundle/Resources/public/js/*' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% endblock %}
</head>
{% endblock %}
<body>

edited Sep 15, 2014 at 12:19

Shairyar

3,3569 gold badges51 silver badges90 bronze badges

answered Sep 14, 2014 at 18:14

Facundo Fasciolo

4924 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shairyar Over a year ago

i improved one of the solution you provided regarding CSS although your solution of <link rel="stylesheet" href="{{ asset_url }}"/> works but this causes the problem with images being used via CSS so i improved it a bit by updating your answer, this is what i edited {% stylesheets 'bundles/default/css/*' filter='cssrewrite' %} once again thanks

ROLO · Accepted Answer · 2014-09-14 18:16:58Z

0

this is pretty funny

           {% stylesheets '@DefaultBundle/Resources/public/css/*' %}

using that you're telling the template engine to iterate all the css in the assets directory, and adding all the <link/> to them, that's why they repeat times the assets

answered Sep 14, 2014 at 18:16

ROLO

5814 silver badges13 bronze badges

Comments

R Sun · Accepted Answer · 2015-02-08 12:43:43Z

As per documentation: (http://symfony.com/doc/current/book/templating.html#including-stylesheets-and-javascripts-in-twig)

You can also include assets located in your bundles' Resources/public folder. You will need to run the php app/console assets:install target [--symlink] command, which moves (or symlinks) files into the correct location. (target is by default "web").

http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-javascript-files

To include JavaScript files, use the javascripts tag in any template:

{% javascripts '@AppBundle/Resources/public/js/*' %}
 <script src="{{ asset_url }}"></script>
{% endjavascripts %}

Including CSS Stylesheets:

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

Notice that in the original example that included JavaScript files, you referred to the files using a path like @AppBundle/Resources/public/file.js, but that in this example, you referred to the CSS files using their actual, publicly-accessible path: bundles/app/css. You can use either, except that there is a known issue that causes the cssrewrite filter to fail when using the @AppBundle syntax for CSS Stylesheets.

Collectives™ on Stack Overflow

Including css and js files in symfony 2.5

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related