How to have Rails' webpacker output URL without scheme and host

Asked Apr 02 '20 at 19:42

Active Apr 02 '20 at 19:42

Viewed 417 times

I have a Rails 5 app that makes use of webpacker magic. It worked fine until I added a (S)CSS rule that references an image. Webpacker/webpack produces an absolute URL (with scheme and host) in the form http://packs/media/images/image.png. This obviously won't work. The stylesheet and javascript tags do have relative URLs without scheme and host, e.g. <link rel="stylesheet" media="screen" href="/packs/css/application-92fa133c.css">.

# config/webpacker.yml
default: &default
   # ...
   resolved_paths: ['app/assets']
   # ...

user@56f1d2e30dc8:/home/app/app# bin/rails c
Running via Spring preloader in process 5837
Loading development environment (Rails 5.2.4.1)
[1] pry(main)> Rails.configuration.action_controller.asset_host
=> nil

This is how I reference the image in the SCSS file:

background-image: url('~images/image.png');

Question: What can I do to make webpack translate ~images/image.png to a URL without scheme and host?

asked Apr 02 '20 at 19:42

bovender

1,838
15
31

This might be helpful: https://stackoverflow.com/questions/15257555/how-to-reference-images-in-css-within-rails-4 – ellitt Apr 02 '20 at 19:44
Where is the image located and where is the scss file located within your Rails app? – rossta Apr 02 '20 at 22:30
1

The image's path is `app/assets/images/image.png`, the SCSS' path is `app/javascript/style/style.scss`. – bovender Apr 03 '20 at 05:07
Thanks. Could you post the 'webpacker' gem version and contents of package.json as well? – rossta Apr 03 '20 at 12:11
Also, any edits you've made to your webpack configuration. – rossta Apr 03 '20 at 12:30

How to have Rails' webpacker output URL without scheme and host

0 Answers0