Add Bulma to my Middleman Project

This is short post for myself noted 😬. As a title of this post, no matter what Bulma or any CSS Framework, you can add your CSS to Middleman via sprockets.

Normally, I installed Bulma via yarn that load and install dependencies to node_modules folder

yarn add bulma

When I added Bulma to my scss file its show error like this

Error: File to import not found or unreadable: bulma/bulma.\A Load paths

I figure it out, because of SCSS can’t see a node_module folder, After that, in Gemfile I added middleman-srockets

source 'http://rubygems.org'
gem 'middleman'
gem 'middleman-blog'
gem 'middleman-sprockets'

Config append path of a sprocket to match with node_modules folder

In config.rb file, I added:

activate :sprockets
sprockets.append_path File.join(root, "node_modules")

And finally, your main.css.scss.erb or application.css.scss.erb. You can use without any errors.

@import "bulma/bulma";

That’s it 🎉