Rails 6 by default now bundled with webpacker. Developers have choice to go for webpacker alone to use the images, css and js.
But there are cases where developers have to use both asset pipeline and webpacker.
The post is about how to deal these two things together, especially for the images.
<head> <%= stylesheet_link_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'application', media: 'all' %> </head>
Assume we have few images 1.jpeg, 2.jpeg, 3.jpeg in
require("@rails/ujs").start() require("@rails/activestorage").start() require("channels") // add these 2 lines import 'src/stylesheets/application' const images = require.context('../images', true)
Now we are good to use images from both folders
That's all. Now we can use both asset pipeline images and
webpack images together in our css.
# This is normal way to call image present in app/assets/images folder. <%= image_tag "lake.jpeg" %>
Note: In case if we need to share a same image between asset pipeline and webpack, then it is good to place the image in app/assets/images folder itself. It makes our life easy to call them in both asset pipeline css, views and webpacker js or css easily.