Symfony2 Assetic cssrewrite making bad links

Question

I have some css files that are being combined into a single css file by assetic. They have some references to image assets that are being rewritten by cssrewrite. Cssrewrite is clearly making completely wrong links.

Folder structure:

-src
   -Project
      -StoreBundle
         -public
            -images
               -store
                  -v2
                    -logo.svg
            -css
               -store
                  -v2
                    -font.css
                    -html5reset.css
                    -store.css

I have the following settings for assetic in config.yml:

store_web_css:
    inputs:
        - '@ProjectStoreBundle/Resources/public/css/store/v2/html5reset.css'
        - '@ProjectStoreBundle/Resources/public/css/store/v2/font.css'
        - '@ProjectStoreBundle/Resources/public/css/store/v2/store.css'
    filters:
        - ?yui_css
        - cssembed
        - cssrewrite
    output: css/store.web.css

Assetic has setting such that the images are getting written to /web/bundles/projectstore/images/store/v2/ whereas the combined css files (store.web.css) gets written `/web/css/store'

There is the following link in the css file:

url('../bundles/projectstore/images/store/v2/logo.svg');

that becomes this in /web/css/store.web.css:

url(../Resources/public/css/store/bundles/pokkistore/images/store/v2/logo.svg);

I've read in other threads that there's a bug with the cssrewrite filter using the @ style of referencing to the css files, but the links to logo.svg and other assets are still broken even if I try to change them.

Assetic has write_to set to "web/store", no settings for read_from.

ggioffreda ggioffreda · Accepted Answer · 2015-04-18T08:08:31

You need to use the bundles/projectstore notation instead of @ProjectStoreBundle/Resources/public notation as stated in the official documentation:

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 use relative paths to where your stylesheet is at the moment you write it, not to where it'll be once processed by Assetic:

url('../bundles/projectstore/images/store/v2/logo.svg');

is wrong, it should have a relative path to the asset, like:

url('logo.svg');

if they both are in the same directory. Or in your case:

url('../../../images/store/v2/logo.svg');

Symfony2 Assetic cssrewrite making bad links

2 Answers