Automatically converting SCSS files into CSS in each Jekyll build.
into /css/CSS-FILE in each build"]
Bower makes it easier to keep up to date all the frameworks, libraries, assets, and utilities used in web development.
Jekyll automatically generates css files from scss.
This tutorial shows how to use both of them togheter, using Bootstrap-flex 4 as the example package.
The default usage of Bower consists in having the packages downloaded to
The problem is that Jekyll uses, by default,
/_sass directory to put custom
.scss files, that are then processed into some file located at
The goal is to be able to include the
bower_components directories containing
.scss files, into
/_sass directory to be consistent with default configurations.
Bower_components directory shouldn’t be included into
/_sass directory directly,
because they can contain a lot of different files, not only
In this tutorial the Bootstrap 4 bower package is structured as:
bower_components/bootstrap/ ├── dist │ ├── css │ │ ├── bootstrap.css │ │ ├── bootstrap.min.css │ └── js ├── ... └── scss ├── _alert.scss ├── _animation.scss ├── bootstrap-flex.scss ├── bootstrap-grid.scss ├── bootstrap-reboot.scss ├── bootstrap.scss ├── _breadcrumb.scss ├── ... └── _variables.scss
We want to be able to include
in our Jekyll website, as it is not currently distributed by default as a
Generating CSS files from Bower directories
A symbolic link should be created inside
/_sass pointing to the bower
directory containing the
In the base of the jekyll project:
$ ln -s bower_components/bootstrap/ _sass/bootstrap
This creates a symbolic link named
bootstrap inside the
To generate them automatically, Jekyll needs to have the following SCSS file
/css/bootstrap-flex.scss, so it can generate
--- --- @charset "utf-8"; // Import partials from `sass_dir` (defaults to `_sass`) @import "bootstrap/scss/bootstrap-flex" ;
Each time Jekyll builds a site it will create
Including CSS into templates
To make the website use the newly generated CSS file, it should be included in a template like:
<link rel="stylesheet" type="text/css" href="/css/bootstrap-flex.css">
This is a simple process respecting each package default directories, that makes it
easy to maintain Bower packages up to date, without having to regenerate
them manually with the
Bower package directory"] B["Create a SCSS file in /css directory
to process Bower SCSS file "] A ==> B B["Include the generated CSS file from /css in a layout"]