Bug on url() in stylesheets

[paul-mesnilgrente]

I created a simple repository https://github.com/paul-mesnilgrente/rails-7-url to reproduce my problem. The only interesting part is in application.sass.scss: background-image: url('images/background.jpg'). The file is app/assets/images/background.jpg.

I tried a few variants of this path: /images/background.jpg, ../images/background.jpg, ./images/background.jpg but nothing works. The translated URL in the browser will always give a 404.

I saw a few PRs (#489, #476) around this lately but I didn't find how to fix my problem still.

It feels very strange that it doesn't work on a fresh rails project and nobody complained about it so I must miss something simple...

[paul-mesnilgrente]

You can also note that if I include @import 'datatables.net-zf/css/dataTables.foundation.min', the images path are not translated either. I can include a commit with that if needed.

[paul-mesnilgrente]

If you look at the CSS debugger of the browser you'll see that the background-image doesn't have any hash digest as it should.

[paul-mesnilgrente]

I found the problem which was actually pretty dumb. In manifest.js we have this line by default //= link_tree ../images.

And the thing is, rails doesn't look for the assets relatively to your stylesheet or even relatively to app/assets. It's only relative to those //= link_tree ... paths.

So the right path, which I hadn't tried before was url("background.jpg").

[paul-mesnilgrente]

Now an issue remains for libraries. I have datatables.net-zf in my node_modules. I tried doing this in manifest.js: //= link_tree ../../../node_modules/datatables.net-zf/css because there's url(../images/sort_asc.png) in the css file I include. But this doesn't work because the image isn't found by sprockets.

[brendon]

@paul-mesnilgrente, did you ever get anywhere with this? I'm having a similar problem with jstree. It defines background-images relative to the CSS file. The images are in the same directory as the CSS file but sprockets won't find the images even when I link them directly. The only way I've been able to make it work is to copy the images to /assets/images which defeats the point of being able to draw from node_modules.

[paul-mesnilgrente]

I think I have the same information in here: https://stackoverflow.com/questions/71423330/bug-on-url-in-scss-files-on-rails-7/71423760?noredirect=1#comment137148760_71423760

But I wrote:

Side note : If you use libraries like datatables which are including relative paths, you need to add something link this in manifest.js //= link_tree ../../../node_modules/datatables.net-zf/css

If this can help you :)