[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: Adding Bootstrap to a Phoenix 1.6 project - DEV Community

My code: GitHub - shahdeys/website at feature/phoenix

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

Needs to happen after everything is done.

1 Like