WDstack
Published in

WDstack

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

--

--

--

Tools, apps & insight on design + development

Recommended from Medium

How I made my own private cloud storage using raspberry pi

How to Resize a PDF File in PHP

Method Overriding and Method Overloading

2 Quick Methods to Back up All Tasks in Your Outlook

Building a self-testing application

Chaos Engineering: Intro

How to Convert ODS to JPG in Python

Manipulate Network Traffic of Mobile and Browser Manually

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
Mirjam Aulbach

Mirjam Aulbach

Frontend Developer with a special love for JavaScript and Unit Testing. Passionated about communities.

More from Medium

React with TypeScript Series: Part 1- Getting Started with Props

Get response Headers via Fetch API

Docker Component Basics

Typescript vs. Javascript: The Key Differences You Should Know in 2022

TypeScript vs. JavaScript: The Key Differences You Should Know — Flatlogic Blog