Add Bulma, Fontawesome and Sass to Phoenix using Webpack

In this guide we're going to configure add Bulma, Fontawesome and some packages so webpack will pre-process scss files. A newly generated Phoenix app doesn't use Sass by default which is most likely because each developer/team uses a variety of frontend tools. So let's get started.

Overview

Add Bulma CSS framework

Add Fontawesome for icons

Configure webpack to handle sass

Update packages

It's best if you update your greenfield packages to the latest versions before going further.