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