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.
