Setting up Brunch with Bootstrap 4

TL;DR — what you’ll learn here

  • How to setup Brunch.io 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 Brunch.io while trying to compile Bootstrap 4.

First things first

We’re currently using Brunch.io 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 Brunch.io 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: https://github.com/programmiri/brunch-setup-bootstrap4

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.
https://github.com/sass/node-sass#precision

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 https://github.com/brunch/sass-brunch

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.

Tada.

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.

Github: https://github.com/programmiri/brunch-setup-bootstrap4