A quick guide to integrating Bulma CSS into Webpack encore

Bulma and Symfony’s Webpack Encore
Bulma and Symfony’s Webpack Encore

I recently had to integrate Bulma into Webpack encore for a new initiative at work. I was unable to find any resources specifically dedicated to the integration of these two technologies so I thought I’d write a post. The integration is pretty straight forward, however, I did run into some compilation errors that stemmed from the Bulma Sass files, so I’ll also be sharing the fixes I found for them.

We first need to install a few dependencies:

  • Bulma : the framework itself by running npm install bulma --save-dev
  • node-sass: because Bulma is built with Sass, we need to install…

How Webpack Encore relates to Webpack and how to configure it

Photo by Michael Aleo on Unsplash

The codebase I’m currently working with is built on PHP’s Symfony framework. After version 4, Symfony ships with Webpack Encore. I use the tool daily but have never had to install and configure it from the ground up.

I thought that writing a post about it might be a good way to walk through it on my own and also gain a deeper understanding of it.

A quick note on Webpack

Why do we need Webpack?

In PHP, code is organized into small files that work together.

In JavaScript, it is possible to write all our code into one file — for a small project…

How to set up and change SSH keys to use multiple GitHub accounts on one machine

Photo by Thais Ribeiro on Unsplash

I currently have two GitHub accounts: a personal and a work one. Obviously, my work computer is set up with my work account. I wanted to figure out how to push to GitHub with my personal account whenever I’m working on side projects via my work computer.

At first glance, for the seemingly simple task of switching between two accounts, the process seemed a little involved. But once you break things down into steps, it’s less daunting.

Quick Note on SSH

SSH (or secure shell) is a network protocol which, among other things, allows one computer to communicate with another over an unsecured network…

A quick guide to integrating TailwindCSS into Webpack encore

Photo by Tianyi Ma on Unsplash

I recently had the chance to choose and work with the TailwindCSS framework for a project at work.

After some initial hesitation about its utility-first CSS concept, I conducted a bit more research and interacted with the tailwind community. I eventually came away with enough buy-in to revise my initial judgement and give it a shot.

A most pleasant experience!

I’m currently working on a project that uses PHP’s Symfony framework on the backend and was tasked with integrating Tailwind into Webpack encore, Symfony’s version of Webpack.

Here’s how I went about integrating them.

First, we need to install a…

Amir Bizimana

Frontend dev. Based in MTL. Keen on creativity.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store