How to use Sass with Jekyll (Bootstrap and Font Awesome example)


Posted by Daniel Lanza on March 25, 2016

This post will explain how to use Bootstrap and Font Awesome Sass files in a Jekyll project.

Download Sass packages

Download the Bootstrap and Font Awosome packages from their original website:

Jekyll project

The packages contain stylesheets, fonts and javascript files. Therefore, these files have to be placed into your Jekyll project.

The files will be placed in a Jekyll project like this one:

jekyll-project/
├── _includes/
├── _layouts/
├── _posts/
├── _sass/
│   └── bootstrap/
│   └── font-awosome/
├── css/
│   └── main.scss
├── fonts
│   └── bootstrap/
│   └── font-awosome/
├── js
│   └── jquery/
│   └── bootstrap/
├── _config.yml
└── index.html

Sass files

Place Bootstrap and Font Awosome Sass files into _sass folder:

Fonts

Bootstrap and Font Awosome Sass files request fonts files. Place them into fonts folder:

Javascripts

Place Javascript files in js folder:

Set your main stylesheet and javascripts

The main stylesheet css/main.scss will have the commands to import all the scss files. The result will be a css/main.css file with all the stylesheets imported.

Include the main stylesheet in your jekyll head:

<link rel="stylesheet" href="/css/main.css">

Bootstrap theme requires Jquery and Bootstrap javascripts. Include them right before your jekyll /body

<!-- jQuery -->
<script src="/tips-tutorials/js/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/tips-tutorials/js/bootstrap/bootstrap.min.js"></script>

Sass imports

The command @import in the css/main.scss imports the scss file in the main stylesheets.

Bootstrap and Font Awosome use font folders, so we need to set the font directories before the @import command.

Therefore, the css/main.scss file can be something like this:

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

// Variables to modify font folders
$icon-font-path:      "../fonts/bootstrap";
$fa-font-path:        "../fonts/font-awesome";

// Import partials from `sass_dir` (defaults to `_sass`)
@import "bootstrap-sass/bootstrap";
@import "font-awesome/font-awesome";

Be in mind that a relative path is used in @import command. The files requested in the Sass command are the following:

Minification

Because of the fact you are importing Sass files, you can take advantage of it. You can minify your compiled css file by updating your _config.yml

sass:
  style: compressed