Symfony2 - Images In CSS with Assetic

StackOverflow https://stackoverflow.com/questions/23209063

Question

EDIT: I seem to have found a third party bundle that, with a bit of configuration, appears to accomplish what I am looking for: AlexAsseticExtraBundle. The only disadvantage currently is it doesn't do any type of cache busting. However, adding that functionality was as simple as forking/patching and adding the required dependencies to composer.

I still welcome any official/suggested methods of accomplishing this, but for now this seems to work well enough that I'm comfortable using it in production.

I've recently been diving into Symfony2 and giving myself projects to to do become more familiar with the framework. Here's my setup:

<!-- base.html.twig -->
<head>
    <title>Page</title>
    {% block stylesheets %}
    {% stylesheets  'bundles/website/less/*.less' output='assets/css/output.css' filter='lessphp,?cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}">
    {% endstylesheets %}
    {% endblock %}
</head>

Inside of the LESS file:

/* main.less */
body {
     background: url('../images/bg.jpg');
}

I've run php app/console assets:install web --symlinks and php app/console assetic:dump which, given the use of the cssrewrite filter, generates the CSS file and sets the path of the image to '../../bundles/website/images/bg.jpg'. This works fine.

However, my OCD is kicking in and I'm trying to figure out a way to get all images referenced in the CSS file to also live in the same assets directory in web/ as my CSS/JS and any images using assetic from the Twig templates. My reasoning is quite simply to make it much easier in the future to move these assets onto a CDN and not have to pull them from multiple sources, as well as keeping non-standard files outside of web/ before a deploy.

Before I go off and come up with some obscenely hackish way to accomplish this, is there any simple way to get images referenced inside of CSS files with assetic also handled with an assetic:dump?

Was it helpful?

Solution

I seem to have found a third party bundle that, with a bit of configuration, appears to accomplish what I am looking for: AlexAsseticExtraBundle. The only disadvantage currently is it doesn't do any type of cache busting. However, adding that functionality was as simple as forking/patching and adding the required dependencies to composer.

I still welcome any official/suggested methods of accomplishing this, but for now this seems to work well enough that I'm comfortable using it in production.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top