Using Node, Sass to customize Bootstrap

Written : 2021-06-14 Last Update : 2021-06-14

Setting Up Our Basic project

We will first setup a basic express app that sends a html file on request. if you don't know that, you can simply code the code below.

 mkdir node-sass-bootstrap
 cd node-sass-bootstrap
 npm init --yes
 npm i express bootstrap

Create an index.js file and add the following content there.

 const express = require('express');
 const path = require('path');
 
 const app = express();
 
 app.get('/', (req, res) => {
    res.sendFile(path.resolve('./views/index.html'));
 });
 
 const PORT = 3001;
 app.listen(PORT, () => console.log(`Started at PORT ${PORT}`));

Also create a directory named views and add an index.html file there, with whatever content you want.

Setting Up Sass

Next we need to install node-sass that will compile our scss files.

For Windows

 npm i -g node-sass
 # use this if there shows an error saying script cannot be loaded
 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

For Linux

 sudo npm install --unsafe-perm node-sass

Using Sass

Then we will create a directory named sass and a file in it named main.sass. If you use any other name, remember to change in the commands.

Add the following content in the sass file to customize primary color and font.For more customization visit Bootstrap (opens in a new tab)

 $primary : #eb4d4b;
 $danger : #535c68;
 
 @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
 
 $font-family-base : 'Do Hyeon', sans-serif;
 
 @import '../node_modules/bootstrap/scss/bootstrap.scss';

Now whenver you want to compile you can use node-sass, I am adding that as a command for simpilicty.

 # to compile 
 node-sass ./sass/main.scss -o ./static/css/
 
 # to watch
 node-sass ./sass/main.scss -wo ./static/css/

NOTE : The -wo won't compile it on the first run, only after the changes.

I have added then to package.json file

 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "compile-sass" : "node-sass ./sass/main.scss -wo ./static/css/"
 },
 "keywords": [],

So now then can be run using

 npm run compile-sass

But if you are using any front-end framework like React, Angular or Vue, then insted of using this, try better options available there .