Bug on url() in stylesheets
paul-mesnilgrente opened this issue · 6 comments
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...
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.
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.
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").
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.