[SOLVED] Troubleshooting: Bootstrap 5.2 with Phoenix 1.6

Spent a better half of a day trying to display style sheets from Bootstrap 5 in Phoenix LiveView, unfortunately I am failing hard. I saw this post, but I don’t want to use NodeJS to build and manage my SCSS, rather let esbuild from Elixir and Dart Sass handle it.

Observations: I can see the style sheet when I inspect my browser but unfortunately the web pages fail to render the CSS.

Steps I’ve taken: I’ve tried releasing a prod version as well and dart sass crashes (going to cross that bridge when I get to it) when running the server locally. I’ve also copied the generated style sheet from: www.shahsyed.com and it works fine. So I know there is something weird with the CSS generated. Just not sure where and what.

Ask: If anyone has suggestions on how to get this working even more easier than what I have done, I’m all ears.

Tutorial I followed for reference: https://dev.to/oliverandrich/adding-bootstrap-to-a-phoenix-1-6-project-hfe

My code: https://github.com/shahdeys/website/tree/feature/phoenix

Solution: I’m a goof. I figured it out. The issue was the order of operations during the assets.deploy alias:

https://github.com/shahdeys/website/blob/feature/phoenix/mix.exs#L65

Needs to happen after everything is done.