Relative URLs in CSS sometimes won't be swapped to the revved file paths

[gsklee]

This works:

background: url('/images/phone.png'); ===(usemin)==> background: url('/images/53a6ac41.phone.png');

This also works:

background: url('images/phone.png'); ===(usemin)==> background: url('images/53a6ac41.phone.png');

This doesn't work (despite 53a6ac41.phone.png being in the right directory):

background: url('../images/phone.png'); ===(usemin)==> background: url('../images/phone.png');

[szimek]

I have exactly opposite problem :)

When usemin task is executed, images are in dist/images, CSS src - .tmp/concat/styles/main.css and dest - dist/styles/main.css.

If I use absolute URL:

background: #c7a07f url('/images/phone.png');

it doesn't rev the file. I'm not sure what it treats as / path, but probably it can't find it in dist/styles.

If I use relative URL:

background: #c7a07f url('../images/phone.png');

it works fine.

The issue is that both versions work fine in development, so it's really easy to deploy messed up version. I'm using grunt-usemin 2.0.2 and grunt-contrib-cssmin 0.7.0.

[peterlarkin]

I've had the same issue as @gsklee.

When using relative paths in my CSS, the image files themselves get revved but when it gets to running "usemin:css", none of the references to these images are updated in the CSS.

As mentioned above, when I change the image references in my CSS to absolute paths, it does update the references properly during "usemin:css".

[theskumar]

+1.

[mrtorrent]

👍

Just to clarify, @peterlarkin more accurately describes the issue I'm seeing. @gsklee, do you agree? Are you saying that the paths in your CSS files don't get updated to point to the images with the revved file names?

If so, you may want to update the bug title and description, as it's a little misleading -- they make it sound like the paths in your CSS get updated with revved filenames but for some reason your browser can't find them.

Glad I'm not the only one having this issue! For now, rather than switching to absolute paths, I'm using @marcalj's workaround: yeoman/yeoman#824 (comment)

[marcalj]

+1 :)

[gsklee]

@mrtorrent I've updated the issue to better described what I saw, got no idea what I was trying to say as well 🙀

[savanpalivela]

+1

[dmoreno]

+1

[htanjo]

+1

I also encountered the same situation and prevented it using @marcalj's trick. - yeoman/yeoman#824 (comment)
In my case, any name including non-existing directory seems to fix it.

usemin: {
  options: {
    assetsDirs: [
      '<%= path.dist %>',
      '<%= path.dist %>/any_name_is_ok'  // Fix relative path issue.
    ]
  },
  html: ['<%= path.dist %>/**/*.html'],
  css: ['<%= path.dist %>/**/*.css']
},

[tonyanhq]

@htanjo it works, thank you.

[Ajaykumarkonda]

I also encountered same issue. Relative paths in html img src="images/image.png" is not working filerev but in css background image file rev is working
Any solution for html src paths for file rev.
I tried few solution but not worked