Symfony files which are included in CSS are not found when using assetic

Question

I'm using Symfony with Twig and I use assetic. The problem is that my CSS file includes other CSS files like that:

@import url(ie8.css);
@import url(blocks.css);
@import url(plugins.css);
@import url(app.css);

And these files are not found when webpage is displayed. Same happens with fonts and images. How do I solve this?

I have to mention that I load css files like that:

        {% stylesheets
        '@BaseBundle/Resources/public/plugins/bootstrap/css/bootstrap.min.css'
        '@BaseBundle/Resources/public/css/style.css'
        filter='cssrewrite'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

sjagr sjagr · Accepted Answer · 2015-06-16T20:31:10

From the Symfony docs and this section as well:

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.

and

When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax. See the note in the above section for details.

The cssrewrite filter is crucial as it will rewrite those url() CSS paths that you defined in your stylesheets. By using the @AppBundle syntax, this no longer happens. You need to load CSS files like this:

{% stylesheets
    'bundles/base/css/bootstrap.min.css'
    'bundles/base/css/style.css'
    filter='cssrewrite'
%}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Note the paths may not be 100% correct (it depends on your bundle name). You should double check by performing php app/console assets:install and look in your web/ folder.

Symfony files which are included in CSS are not found when using assetic

1 Answers