Question

I’ve been using Symfony for years but I’m brand new to Symfony2.

When I include jQuery and jQuery UI into my Symfony2 project, I find that all the JavaScript works correctly, but not all the CSS comes through, even though I’m including the main jQuery UI CSS file that should make all the styles work.

It looks to me like the reason the jQuery UI CSS is not working is that the paths in the CSS imports don’t mean anything to Symfony:

// web/js/development-bundle/themes/base/jquery.ui.base.css
@import url("jquery.ui.core.css");
@import url("jquery.ui.resizable.css");

Obviously jquery.ui.core.css with no path isn’t going to work for Symfony.

So what do I do? How is this normally handled in Symfony2?

Answer 1

Those are just CSS import declarations and I wouldn’t think symfony would interfere with them. Do you get 404 errors when your page tries to access them?

It seems like this is similar to this question/answer: Where do Symfony2 shared CSS and JS assets go, best practice wise?

One of the (non accepted) answers suggests this:

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

Or, if you must use the @import method, make sure its the first thing in your style block:

<style type="text/css">
  @import url("jquery.ui.core.css");
  @import url("jquery.ui.resizable.css";

  ... other style declarations

</style>

Does that answer your question?