Bulma and Symfony’s Webpack Encore

A quick guide to integrating Bulma CSS into Webpack encore

Amir Bizimana
Sep 10 · 3 min read
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.

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:

  • 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

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Amir Bizimana

Written by

Frontend dev. Based in MTL. Keen on creativity.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Amir Bizimana

Written by

Frontend dev. Based in MTL. Keen on creativity.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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