Symfony2 and Assetic - Images referenced in my CSS won't load

Question

I have a CSS sprite sheet I'm trying to use, but my CSS file cannot 'see' the image. I've followed the answer provided here to no avail. My bundle structure is:

src/
    vendor/
        project/
            bundle/
                Resources/
                    public/
                        css/
                            normalize.css
                            static.css
                        images/
                            sprites.jpg

I've already done:

$ app/console assets:install
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for MajorProductions\SewingDiva\SiteBundle into web/bundles/majorproductionssewingdivasite
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution

and:

$ app/console assetic:dump
Dumping all dev assets.
Debug mode is on.

22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_normalize_1.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_static_2.css

Not sure what else to do....

score 6 · Accepted Answer · answered Dec 09 '12 at 15:27

6

Solved it by changing the reference from:

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

to:

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

Apparently the auto-magical reference in the first version is not the way to go, despite it being used in the official Symfony docs.

answered Dec 09 '12 at 15:27

Major Productions

5,914
13
70
149

With Symfony 2.1, I found that KevinM1's answer was correct and worked for me... the documentation does appear to be lacking in answering this question. – tcowin Dec 12 '12 at 20:07
That solution works, however, notice that when modifying some style in CSS inside Resources/public/folder, it will not reflect the changes. You will need to modify directly in web folder, or in Resources folders and then republish assets every time a modification occurs. – jstuardo Oct 15 '13 at 17:18

score 1 · Answer 2 · edited Jun 18 '13 at 14:34

1

@KevinM1

Apparently the auto-magical reference in the first version is not the way to go, despite it > being used in the official Symfony docs.

It is here (in French, but equivalent doc for other languages certainly exists)

edited Jun 18 '13 at 14:34

Chris

5,584
9
40
58

answered Jun 18 '13 at 14:24

laetilaeti

11
1

[English doc link](http://symfony.com/doc/current/cookbook/assetic/asset_management.html) – fazy Nov 03 '13 at 15:13

score -1 · Answer 3 · answered Dec 09 '12 at 08:39

Well, from the documentation:

This is a key point: once you let Assetic handle your assets, the files are served from a different location. This can cause problems with CSS files that reference images by their relative path. However, this can be fixed by using the cssrewrite filter, which updates paths in CSS files to reflect their new location.

So you need to enable the cssrewrite filter:

# app/config/config.yml
assetic:
    filters:
        cssrewrite: ~

And use it in your stylesheets block:

{% stylesheets '@AcmeProjectBundle/Resources/css' filter='cssrewrite' %}
    <link href="{{ asset_url }}">
{% endstylesheets %}

Well, like I said, I followed the answer in that other topic, which was to use the cssrewrite filter, but that didn't solve the problem. Further investigation shows that Assetic creates its own web/css directory by default. With that filter it's looking for web/Resources/public/images/ which doesn't exist. — Major Productions, Dec 09 '12 at 13:43

Symfony2 and Assetic - Images referenced in my CSS won't load

3 Answers3