Grav: CSS Pipeline breaks image paths..

[ritchiedalto]

Turned on CSS pipeline and minify for the first time, all my css images break, as in…

-image: url("../images/bg-vertical-stripe.jpg");

… no longer works.

The only way I can make this work is to specify the insanely long path relative to the assets directory as such:

-image: url("../user/themes/ghost-theme/images/bg-vertical-stripe.jpg");

I've tried this with CSS Rewrite on and off, made no difference (cleared cache in between just to make sure). If things like {{ theme_dir }} and theme:// are supposed to work in a CSS file, then I can't figure out the syntax.

[flaviocopes]

I just tried.

Put

body {
    background-image: url('../../screenshot.jpg');
}

in user/themes/antimatter/css/pure-0.5.0/grid-min.css, got this in the pipelined CSS under /assets:

body{background-image:url('/user/themes/antimatter/screenshot.jpg')} in the case of a site under its own root domain, and

body{background-image:url('/grav-develop/user/themes/antimatter/screenshot.jpg')} on a site under the /grav-develop subfolder

so I can confirm it works fine.

[ritchiedalto]

As I said in my original post, yes the whole path to the resource does let it work, but I don't consider this a fix to the problem. It would mean having to change paths in the CSS when I deploy the site to another server and sub directory.

[flaviocopes]

No, it just means clearing the cache when you deploy to another server / change folder name

[flaviocopes]

You have probably not read my reply, to give a thumbs down. You use relative paths in your CSS, they are translated by Grav automatically to absolute paths.

[rhukster]

I just want to reiterate that by clearing the Grav cache, grav will regenerate the CSS and with that the correct path for each server. The pipelined file is considered a temporary auto-generated cache file and as such it's stored outside of the user/ folder in the assets/ folder.

You really shouldn't be pushing any auto-generated cache files between servers. The whole point is these files are automatically generated by Grav as needed. Trying to keep these files in sync will probably result in more issues as even minor PHP version difference, opcache differences, folder structure differences etc, will result in broken sites.

[ritchiedalto]

@flaviocopes Thank you! I had to do a complete test to figure it out. OK I was wrong. It's not broken, I simply couldn't find the info I needed.

It's counter-intuitive IMO that you would put a root relative path in a CSS file and expect it to work if the development site and the production site are in two different paths from the web root. Grav is smarter than I thought! ;) Is this documented?

And @rhukster ... OF COURSE I'm not deploying cached stuff from development to production :)