CODEWITHSUNDEEP
csssymfonytwigassetic
Einius
Einius

Reputation: 1382

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

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 %}

Upvotes: 0

Views: 1117

Answers (1)

sjagr
sjagr

Reputation: 16502

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.

Upvotes: 1

Related Questions