I’m going to show you how easy it is to add Bulma to your Rails application. In this post I’ll show you how to add it using the Asset Pipeline. If you want to use the Webpacker gem, then Read this post.

Add Bulma to Rails 5.1 using the Asset Pipeline and Yarn

Since Rails 5.1 you have been able to use Yarn to add npm packages to your Rails application.

First let’s take a quick look at how we can confirm that Bulma is available to Yarn:

  1. Go to Yarn
  2. Search bulma
  3. Review the package - now you know you can install it with Yarn!

Let’s add Bulma to our Rails application now:

  1. In the Terminal, navigate to your Rails application directory
  2. Type: yarn add bulma
    • I’ve installed Yarn using Homebrew. If you don’t want to do that you will have to use ./bin/yarn add bulma

That’s it! There isn’t even a third step! For the curious, Bulma has been installed inside your Rails application directory in a folder called node_modules. This folder is part of the search path for the asset pipeline as of Rails 5.1.

At this point, Bulma is ready to go. We just need to add it to our mainfest file:

  1. Open your css manifest file located at: app/assets/stylesheets/application.css
  2. Add a require statement to include the bulma sass file:
 *= require bulma/bulma
 *= require_tree .
 *= require_self

That’s it! If you are running your application already, simply refresh your page and notice that Bulma has taken over.

One thing you might be asking is why we had to add bulma/bulma. This is because the asset pipeline is looking for a file and not a folder. Try require bulma and you will get the error:

couldn’t find file ‘bulma’ with type ‘text/css’

Inside the node_modules/bulma directory you’ll see a file named bulma.sass, that’s the file the mainfest file needs.

Next, let’s see how we would add Bulma with the Webpacker gem!