WHEW! I just slugged through this very thing today! First, I tried this method Phoenix 1.7 and Bootstrap 5 - Tutorials and screencasts for Elixir, Phoenix and LiveView which didn’t load my css for some reason, but gave me a start. So I resorted to the above-mentioned asset management guide, a lot of Googling and trial-and-error, and wound up doing this:
- Remove the mix esbuild package and the config from config.exs
- Use npm to install esbuild, esbuild-sass-plugin (needed for bs), postcss, postcss-preset-env, popperjs/core (for tooltips), bootstrap and bootstrap.native, and finally, font awesome free
- change the watchers in dev.exs to use node build.js script, as well as the setup and deploy aliases in mix.exs
- add the build.js file
- rename app.css to app.scss and import bootstrap.native and font awesome, removing phoenix.css import and delete the css file
- change app.js to import app.scss instead of app.css
Here is a GitLab PR showing the differences: Add Bootstrap to new Phoenix 1.6 Project (!1) · Merge requests · Don Lettrich / phx16 · GitLab
Another good source of info was Dashbit’s blog: Using Bootstrap Native with Phoenix LiveView - Dashbit Blog. There’s more in that blog that I still need to implement, like the input helpers and modal changes to use Bootstrap format there, but at least the hard part is done here. Hope this helps you get up and going.
Once caveat here is that Font Awesome’s scss currently uses ‘/’ operator in the scss rules which is deprecated in dart_sass and will be removed in v2.0.0. As a result, you’ll get a boat load of deprecation warnings when esbuild runs, but it still functions. There is an open issue on FA’s site for this.
PS…I’m no JS expert by any means. There may be better ways of doing it and maybe even a way to quiet the deprecation warnings in esbuild. Please post back if anyone has any suggestions there or if I’ve done something incorrectly. 
