Bulma and Symfony’s Webpack Encore

A quick guide to integrating Bulma CSS into 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.

Dependencies

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 this to will allow us to compile Sass into CSS. Run npm install node-sass --save-dev
• sass-loader : is a loader for Webpack which compiles SCSS/Sass files. Run npm install sass-loader . Note: Upon installing it installs it at the latest version; however I ran into some issues with it so I had to go back to version 7.0.1 → npm install sass-loader@7.0.1 --save-dev
• sass-loader: This package helps with injecting our styles into our DOM. Run: npm install style-loader --save-dev

Configuration:

Now we need to configure a couple of files:

• bulmaStyles.scssa new scss file we’ll be creating, but you can name yours whatever you’d like.
• webpack.config.js that should already be previously set up with your webpack encore. You can check out this other post I wrote about it, or refer to the official docs
• base.html.twigin your views template.

bulmaStyles.scss:

In this file you get to add or remove Bulma styles or modify them to make them your own: you are in control of variable color names, font variable names, whether you would like to import a specific Google font. Bulma is written in Sass and made out of 39 Sass files that you may or may not import depending on your preferences. This means that you can leverage this modularity to reduce the build size of your Bulma file’s build size thus potentially scoring points for performance on your app or site.

webpack.config.js:

Errors:

“File to import not found or unreadable” error:

The configuration here is swift, we only need to do 2 things:

• enable Sass/SCSS support by un-commenting out the enableSassLoader() feature. (see line 61 below)
• adding a style entry with a name of your choice and the path to the new SCSS file we created above containing our Bulma styles and Sass modules .addStyleEntry(‘Bulma’, ‘./assets/css/Sass-SCSS/bulmaStyles.scss’) (see line 29 below)

Below is a gist of what my webpack.config.js file looks like.

base.html.twig:

In this twig view, we simply need to add an encore_entry_link_tags() function and pass in ‘Bulma’ or whichever name you passed into your style entry earlier in your webpack.config.js file. This is very much like adding a stylesheet link to an index.html file.

There we have it, hope this helped you out, thanks for reading, bye.

Resources

• Bulma
• Webpack encore
• Sass
• node-sass
• sass-loader
• style-loader
• Bulma styles