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

#css #bulma #webpack #symfony