Bulma and Symfony’s Webpack Encore

A quick guide to integrating Bulma CSS into Webpack encore

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

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

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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