Customize bootstrap sass

Today i will show you how to install sass through NPM in Windows and customize bootstrap sass for your next project.

 

Open you cmd prompt and type npm install -g node-sass to run npm command you have to install node.js in you machine after installing you will get this message see the image below

SASS installation

Now in you machine create a file structure like this see the image below
Follder strcture of Bootstrap files

Inside you SCSS file put all the downloaded SCSS file from bootstrap see in the below image all downoaded files are inside you SCSS files
Boostrap scss file strcture
Inside you style file created two files CSS and SCSS
Customize path of css files

inside style/SCSS create a three files see the image below
Custom SCSS file strcture
1)_base.scss is a file where we will created our own custom SCSS files
2)_variable.scss is a file where we will override the bootstrap _variable.scss files
3)main-app.scss is a file which we linked to our web page.
after compiling we will get the main-app.css file in style folder
Resut of Compiled SCSS file
See in the image below what will be the path of files when we compile SCSS files
SCSS Compiled path
You can download the file Download

Leave a Reply

Your email address will not be published. Required fields are marked *