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.