Bootstrap 5 and scss usage in Phoenix 1.6

Phoenix Forum Questions / Help
1

Need help in installing bootstrap 5 and use scss in Phoenix 1.6 app

Is there any official documentation on how to achieve the same. Thanks

2

There is the official asset management guide. Overall Phoenix doesn’t deal with javascript or css itself, those are just static files like any other, just comes with a basic esbuilf setup, but it can work with any tool you want to use when you configure it.

I think that’s a great idea for a blog post, if you want to write one (or maybe check if someone wrote about this already)

2 Likes
3

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:

  1. Remove the mix esbuild package and the config from config.exs
  2. 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
  3. change the watchers in dev.exs to use node build.js script, as well as the setup and deploy aliases in mix.exs
  4. add the build.js file
  5. rename app.css to app.scss and import bootstrap.native and font awesome, removing phoenix.css import and delete the css file
  6. 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. :wink:

Screen Shot 2021-10-07 at 6.11.33 PM
Screen Shot 2021-10-07 at 6.11.33 PM1417×903 56.5 KB

1 Like
4

Since I see more and more questions about setting up frontend tools for Phoenix 1.6 I’m gonna leave the links of two recent threads I’ve contributed to for posterity:

After testing both approaches for some time I have to say that using Vite Js will be perfect if you just want things to work and forget about it.

PS.: Since Phoenix doesn’t make any assumptions of your frontend tooling, you basically just have to set up things like you would for any other framework out there. Perhaps the only difference is going to be the watcher configuration so you can get code-reload for your dev environment.

3 Likes
5

There is also dart-sass, which is like our esbuild installer but for SASS: GitHub - CargoSense/dart_sass: An installer for sass

It is a great option if you want to bring SASS without adding a dependency on node+npm. Then you can add bootstrap to vendor and import the desired files.

6 Likes
6

What I find great about 1.6 is how easy everything gets if you don’t need custom JS and use the CDN-CSS-only bootstrap (https://www.bootstrapcdn.com). Just set the link and remove phoenix.css.

1 Like