Including CSS and JS files in Symfony using Assetic

Question

I'm looking for including .css ans .js files using Assetic with Symfony. The issue is the browser fails to load these files.

{% block stylesheets %}
      {% stylesheets '@MUSCoreBundle/Resources/public/css/*' filter='cssrewrite' %} 
      <link rel="stylesheet" href="{{ asset_url }}"/>
  {% endstylesheets %}
{% endblock %}


{% block javascripts %}
  {% javascripts '@MUSCoreBundle/Resources/public/js/*' %}
      <script type="text/javascript" src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

sources

Browser console

I wrote the good path to my files.

What am i doing wrong ?

The solution : you have to create the .css and .js files inside the folder CSS. It seems the server can't acess these files if you had copied and pasted them from an other location.

Try to add @ before your path: @MUSCoreBundle/Resources/public/font-awesome/css/font-awesome.min.css — chapay
– chapay, Commented Mar 9, 2015 at 11:18
@chapay I tried to add @ : An exception has been thrown during the compilation of a template ("Unable to find file "@MUSCoreBundle/Resources/public/font-awesome/css/font-awesome.min.css".") in "::layout.html.twig". — Johnrednex
– Johnrednex, Commented Mar 9, 2015 at 13:09

Shairyar · Accepted Answer · 2015-03-09 12:32:47Z

2

If there is a css folder and i want to load all files in that folder then i use this method

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

You can also load specific files forexample

{% block javascripts %}
    {% javascripts
    '@yourBundle/Resources/public/js/jquery.min.js'
    '@yourBundle/Resources/public/js/flat-ui.js'
    '@yourBundle/Resources/public/js/application.js'
     %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

IMPORTANT

Remember to run the following commands when you change something in asset or add new asset

php app/console assets:install
php app/console assetic:dump --env=prod --no-debug

You can read more about these in symfony asset documentation

answered Mar 9, 2015 at 12:32

Shairyar

3,3569 gold badges51 silver badges90 bronze badges

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

4 Comments

Johnrednex Over a year ago

I edited my post : I followed your first example. Now as you see the browser fails to load the .css and .js files. I also tried to run the command ̀ php app/console assetic:dump --env=prod --no-debug ` and the console displays

The source file "/home/isen/public_html/Symfony/app/../web/MUSCoreBundle/Resources/public/css/pa‌ge_in scription.css" does not exist.

Shairyar Over a year ago

I think you are not pointing it right. Go to the web folder, then bundle folder, then open CSS or js folder to check if files exist.

Shairyar Over a year ago

can you also confirm if your asset link looks like this {% stylesheets 'bundles/MUSCore/css/*' filter='cssrewrite' %} and NOT {% stylesheets '@MUSCoreBundle/Resources/public/css/*' filter='cssrewrite' %}

Johnrednex Over a year ago

I found the solution : you have to create the .css and .js files inside the folder CSS. It seems the server can't acess these files if you had copied and pasted them from an other location.

Collectives™ on Stack Overflow

Including CSS and JS files in Symfony using Assetic

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related