Way to SASS using NPM

The article is about how to :

(i) install SASS on local computer
(ii) compile it in our machine both manually and automatically
using command line & NPM

• STEP-1 :

To install SASS in our computer first we’ve to download & install Node.js.

Node.js

After installing , to check if Node is perfectly installed, run the following code in command prompt[for windows] or terminal [for mac]

node -v

check node installation

If version is showed like above then node is perfectly installed.

Now open the directory of your project in your command, where you wanna use SASS.

Then run the following code in your command to install SASS in the desired project.

npm init

first step of installing SASS in project

Now edit accordingly. A package.json file will be created in the project directory.

package.json file

• STEP-2 :

Now run this in the command

npm install node-sass --save-dev

This will install SASS in your project directory successfully.

Now to compile SASS file to CSS file in your machine,
Open the package.json file.

Change the script tag of the file to the following code

"scripts": {
    "compile:sass": "node-sass the-file-that-needs-to-be-compiled  the-output-file -w"
  },

For me it’s :

"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
  },

package.json

Here I want to compile the main.scss file which is in the sass/main.scss directory. And I want it to be stored in style.css file after the compilation which is in the css/style.css directory.

Now run the following code in command.[In the project directory]

npm run compile:sass

This will keep compiling the SCSS code to CSS whenever a change is made in the SCSS file.

N.B. : Remember to keep the command running. Don’t close the terminal or command prompt.

Now to automate the compilation

Open a new command

Run the following code in the new command

For Windows :

npm install live-server -g

installing live server package

For Mac :

sudo npm install live-server -g

This will install live server globally in your machine.

• STEP-3 :

Now again open a new command.

Go to your project directory

run the following code

live-server

create local host

This will create a local host and the changes will be compiled instantly.

N.B. : Don’t close any commands.Otherwise it will not work.

If all the packages are pre installed , following only STEP-3 will do the work.