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.
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 firstname.lastname@example.org --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.jsthat 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.
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.
“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.
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