Assetic's cssrewrite and subfolders

Question

I am using Assetic and Twig in a web application. I am not using the symfony2 framework.

The project structure looks like this

• app

  • styles
  • images

• www

  • css
  • images

I have this markup using the Assetic stylesheets tag in one of my templates:

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

Currently the app is hosted in http://localhost/myapp/ and one would access it via http://localhost/myapp/www

I have written a dump strip that compiles my assets and dumps them to the directories under www.

In my CSS, I am referencing my images using absolute paths (which works):

#myelement{
  background: url('/app/www/images/b.png') no-repeat;
}

If I use a relative path (with cssrewrite filter), the URL is not rewritten:

#myelement{
  background: url('images/b.png') no-repeat;
}

I would like to use my URL as just images/b.png and then let the assetic dumper determine the full path.

I have enabled the cssrewrite filter, but it doesn't seem to be doing anything. How can I supply a relative path in my CSS and have cssrewrite rewrite it to an absolute path?

Answer 1

Turns out I didn't have to use cssrewrite.

Since CSS loads images relative to the CSS file, I just did ../images/image.png. This is a much simplier solution, but I still haven't worked out how cssrewrite works.

Answer 2

I have found that absolute paths don't rewrite. url('/images/foo.png') doesn't rewrite. ... but ... url('../images/foo.png') does... I haven't tried:

url('./images/foo.png') - but I would expect this will rewrite.

I had a lot of frustration with this, but I think in hindsight it makes sense.

The documentation on the Symfony2 site does say this... but its easy to overlook.