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