In this guide I will show you how the Webpacker gem makes it easy to add a CSS Framework like Bulma to your Rails application.

Adding Bulma to your Rails application using 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. Now we need to install Webpacker into our application.

Adding the Webpacker Gem to your Rails application

You can easily add the Webpacker gem to a brand new Rails application using the command line:

  1. Type: rails new myapp --webpack

This will create a brand new Rails application that includes the webpacker gem and runs the webpacker:install rake task. However you probably already have a Rails application that you would like to add webpacker to. So let’s see how to do that now:

  1. Navigate to your Rails application directory
  2. Add gem 'webpacker' to your Gemfile
  3. Run bundle in the Terminal and install the new gem
  4. This gem installed some rake tasks, install webpacker by typing: rails webpacker:install
  5. Review some of the changes in your Rails application:
    • app/javascript folder was created
    • app/javascript/packs folder was created
    • app/javascript/packs/application.js was created, notice the hello world console statement.
    • config/webpacker.yml was created

The most important folder to note here is app/javascript/packs. This is the entry point for the Webpacker gem. You can think of it as sort of like the app/assets directory for Webpacker.

Now that Webpacker is installed, let’s add the Bulma package we installed using Yarn to the Webpacker bundle:

  1. Add a file named application.scss to app/javascript/packs
  2. Add the following content to the file:
  // the ~ means the location is the node_modules directory
  @import '~bulma'
  1. Add a stylesheet_pack_tag to your application.html.erb layout file
  # app/views/layouts/application.html.erb
  <%= stylesheet_pack_tag 'application' %>

That’s it! If you are running your application already, simply refresh your page. Bulma classes will now affect the elements on your page. You can also create your own folder structure inside the javascript folder. For instance, you could create a new file with Bulma overrides inside it and simply import that file in the application.scss file we created for this example.

Hope this guide was helpful. Let me know in the comments if you have any trouble following the steps.