guide, webpack, phoenix, bulma, fontawesome, sass

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.

Try the npm-check-updates to handle this.

Add packages

Let's start by adding the necessary packages using npm

$ cd assets
$ npm i -D node-sass sass-loader bulma @fortawesome/fontawesome-free

This will install the libraries necessary to process sass stylesheets and bulma with fontawesome free.

Add post-processing packages

We'll also need a postcss loader for webpack,  so let's add those packages:

$ npm i -D autoprefixer postcss postcss-loader

Add create a config file for postcss at assets/postcss.config.js with the following content:

module.exports = { 
  plugins: [
    require('autoprefixer'),
  ],  
}

Switching to sass

Let's rename assets/css/app.css to use the scss extension:

$ mv assets/css/app.css assets/css/app.scss

Open assets/js/app.js and edit the import line to use scss as well:

import css from "../css/app.scss"

Next open assets/webpack.config.js and update module rules to the following:

  ...
  module: {
    rules: [
      {   
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }   
      },  
      {   
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { } },
          'postcss-loader',
        ],  
      },  
      {   
        test: /\.sass$|\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {   
            loader: 'css-loader',
            options: {  },  
          },  
          { loader: 'postcss-loader' },
          { loader: 'sass-loader' },
        ],  
      },  
    ]   
  }, 
  ...

Importing Fontawesome

Importing fontawesome  can be done in assets/js/app.js

Open it and add this line:

...

import '@fortawesome/fontawesome-free/js/all'

There are ways to only include the icons you need from fontawesome but this config is simplest as it just includes all.

Importing Bulma with Variables

We're going to create our own custom variables file to use when to configure bulma.

First create assets/css/_variables.scss which we can leave empty for now.

Next let's import this file and bulma from node_modules.  Open assets/css/app.scss and add the following lines:

@import './variables';
@import "~bulma/bulma";

// Your own custom stylesheets

With this set up we can customize Bulma using the different variables available from their docs.

Testing in Browser

Start your server with mix phx.server and to go https://localhost:4000

You should now be able to start using icons and bulma elements, as well as sass from your main app.scss file.

Splitting Frontend Files

In many cases, there is a need to split up JS files and stylesheets per sub-system of an application.  Frontend vs Admin assets for example.

To achieve this with our current set up we're going to make a few changes to assets/webpack.config.js:

Update the entry and output objects to match this:

  entry: {
    'app': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
    'admin': ['./js/admin.js'].concat(glob.sync('./vendor/**/*.js')),
  },
  output: {                    
    filename: '[name].js',     
    path: path.resolve(__dirname, '../priv/static/js')
  },

This will create an app wide JS file and an admin file which can be included in and admin layout.

You will also need to update the plugins object to access the dynamic CSS file names:

  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
  ]

Conclusion

This was a simple guide for getting some frontend tools configured and hopefully you find this helpful when getting started with Phoenix.

Follow us on twitter for updates: @phxroad

Author image

About Troy Martin

Husband, Father & Software Developer who tinkers with writing and building things.
  • Hamilton, ON