Using Node, Sass to customize Bootstrap

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

$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 whenever you want to compile you can use node-sass, I am adding that as a command for simpilicity.

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

Originally published at https://desiprogrammer.com.