Setting up Brunch with Bootstrap 4

TL;DR — what you’ll learn here

Mirjam Bäuerlein
Aug 15, 2017 · 4 min read
  • How to setup with Bootstrap 4 in a manner where you’re able to import only those components of Bootstrap you really want to use.
  • How to resolve the “sass-brunch is taking too long to compile” warning you get in while trying to compile Bootstrap 4.

First things first

We’re currently using for building a static site at work and I’m allowed to use Bootstrap (yay!). Because I already worked with it in a pet project and really liked it, I chose Bootstrap 4. We’re using SCSS anyway and Bootstrap 4 is no longer in LESS, but in SASS. That’s another pro.

There are lots of skeletons for using with Bootstrap, even a few with Bootstrap 4. But I want a very specific setup and structure for my Bootstrap and SCSS in general. Instead of just throwing the whole Bootstrap code in my project, I want to pick only the components I really need and use them.

I’ll write another article about my (currently) favored use of Bootstrap 4 and SCSS in general soon. :)

Getting everything up and running

You can find my setup on github:

Install Brunch

The Brunch site has a really good Getting Started Guide. I did everything as explained. With one exception: I’m using Yarn instead of npm alone because I really like how fast it is. :) Note: installation based on OS X, for other systems please see the respective documentations.

  • Node.js with brew install node
  • Yarn with brew install yarn
  • Install Brunch yarn install -g brunch

Initialize your project

In your working directory you can initialize a new project. Use the dead simple skeleton with brunch new project-name or one of the many, community-provided skeletons. They provide a good starting point. My example is based on the Modern JS skeleton which provides ES6 and Babel support. So it’s: brunch new -s es6 project-name

Install Bootstrap 4

  • First we need SASS support:yarn add sass-brunch --dev
  • Then we need Bootstrap4: yarn add bootstrap@4.0.0-alpha.6 --dev

Update brunch config

Replace: stylesheets: {joinTo: ‘app.css’} in the original config with: stylesheets: { joinTo: { ‘app.css’: /^app/ } } to get all the SCSS files in all the right places.

And… sass-brunch is taking to long to compile

Until now, everything went relatively smooth for my. I built my folder structure, imported a few Bootstrap modules and all went to hell. The build task didn’t finish. It tried compiling and again and again the warning sass-brunch is taking too long to compile appeared. Gah!

aka AKML and “how the f*** is that happening”

Because Bootstrap 4 is not so widespread yet and/or because I’m not good at searching, it took me a while to find the solution: The sass-brunch plugin needed a custom configuration.

Configuration sass-brunch

  • set the precision for the arithmetic operations higher than the default (5) to precision: 8

(The option “precision” is…) used to determine how many digits after the decimal will be allowed. For instance, if you had a decimal number of 1.23456789 and a precision of 5, the result will be 1.23457 in the final CSS.

If you’re using a Ruby compiler, it seems you should also set the option allowCache: true to allow the Ruby compiler to write its normal cache files. For more information see

First simple folder and file structure

In _variables.scss I define custom variables which aren’t provided in Bootstrap.

The real beauty comes from config.scss in the directory “bootstrap”: Bootstrap can be used very modular. I use import and import the modules of Bootstrap I like to use instead of the whole bunch.

A part of config.scss

In my coming text about my (currently) favored use of Bootstrap 4 and SCSS I’ll tell more about this.


That’s it! Have fun :)

Things I learned

  • I still love Bootstrap!
  • Setting up environment usually starts fine and than there’s that one problem and it’s just hell -.-
  • It’s helpful to plan your setup and structure thoroughly before you start working.



Tools, apps & insight on design + development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store