Symfony2 - Assetic - load images in CSS

Solution 1:

use the cssrewrite filter from Assetic bundle

In config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

And then call your stylesheets like this:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Oh and don't forget to use php app/console assetic:dump

Solution 2:

There was few issues with ccsrewrite:

the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.

Here is php version for cssrewrite:

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>

Solution 3:

I solved the problem by following the instructions on this site: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

The actual problem is that you reference your bundle resources absolute, but must reference them relative.

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

Clear your cache and install your assets again

Solution 4:

Regarding Yann's answer, actually you don't have to re-install assets after every change if you use the --symlink option.

Note, however, that running the vendors install script will overwrite the symlinks, so you'll need to delete the bundles/* folders and install the assets with the --symlink option again after running the vendors script.

Solution 5:

I have developed a small bundle with a extra filter to solve this issue. You can find it on github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

With this bundle the @Notation for assetic works if you have relativ paths in your css file.