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 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!

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.

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

WDstack

Tools, apps & insight on design + development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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