How to create and compile a SASS file through NPM

Here is a simple step by step process of creating, compiling a SASS file and also run it locally on the live server,

a) Install Node

b) In the terminal, navigate to the folder in which you want to create the SASS file using dir and cd .

c) To create a package.json file which contain definition of your project and where npm will write packages using npm init

d) Set name and all other details

Install npm SASS package through terminal,

npm install node-sass --save-dev

here,

node-sass - Name of the package we have to install

--save-dev - This updates our package and lists the package.json file as one of the dependencies, this means node-sass is a tool that we use to develop

e) Now create a folder and a .scss file in it and all the SASS code in it.

f) In package.json, link the css and scss file in by adding,

"compile:sass" : "node-sass" "sass/input.sass" "css/style.css"

to

"scripts " : { }

g) In terminal, npm run compile:sass this compiles sass and renders it into the outputfile as css.

h) Now install live server globally, npm install live-server -g so that you can use it in any project.

i) Then just run live-server in your directory to run your project live locally which will reload when you save the SCSS file.