I've been experimenting with the new approaches that DHH has laid out. I've been kung-fu fighting with esbuild-rails and finally got it working with a good setup. There are some nuisances especially with Tailwind JIT but I'm just happy to see the back of webpack.

I hope you'll continue covering how to get into a webpacker-less setup! I can't wait. I'd love if you covered using Vite.js with Stimulus and Tailwind.

Great video as always David. Thanks for using Rails 6 instead of 7 too!

How do you import CSS for libraries like bootstrap?

 ☒ I would probably use their provided gem for bootstrap. But for other things where a gem isn't provided, I am not quite sure of the best method yet. I think that this will be one of the growing pains as we'd have to find out the best routes for these things. I can see other libraries like FullCalendar where this too would be a concern.

# Gemfile
gem 'bootstrap', '~> 5.1.0'

# app/assets/stylesheets/application.scss
@import "bootstrap";

# app/javascript/application.js
//= require "bootstrap"

David
Thanks for your answer and the info...
i rather not use Gems for frontend because i feel like going back to the old times
many js libs require CSS and as painful as webpack is, we can pull JS and CSS with just one yarn command, it would be interesting to see what the solution would be for rails 7

How would you go about using importmap-rails in a rails 6.x or rails7 alpha engine?

 I would likely use their new download option to have the assets pulled down instead of referencing the CDN.

Thank you, I'll give that a go

i have not use rails after 4. so a bit confuse now. this is the new way handle js, imho, looks ok until now. How this will work with images, css?
If I use a js library that also has css, how this will work, or If I use some css theme with some js library?

 ☒ Importmaps is getting better, but I still prefer esbuild over importmaps. I think that there is still a disconnect with libraries that use CSS when consuming them with Importmaps. 

My preferred way is to use jsbundling-rails (esbuild) and cssbundling-rails (bootstrap). This gives it more of a hybrid feel between the old Rails 4 way and webpacker, but without all of the overhead of webpacker.

can I used both of them, for example
use Importmaps to load any js library, and esbuild to load css libraries?

It looks a mess for me. Everyting tangle and connected and impossible to remove.
 - importmaps => no idea of css
 - esbuild
 - webpacker
 - sprockets
 - and another library to replace sprockets in 10 years.

a mess.

If anything, you would use Importmaps for JS libraries and then CSSBundling for the CSS libraries. That's why I'd prefer esbuild and cssbundling over importmaps to get to a, what feels like a normal way, of managing assets.

rails new my_app \
--javascript esbuild \
--css bootstrap

In fact, I just keep the flags in my .railsrc file

➜  ~ cat .railsrc
--skip-jbuilder
--javascript esbuild
--css bootstrap