5 Quick Steps Transpiling SCSS to CSS Using Node (with watch & minify mode)

I use vscode editor on Windows10

1. Install Node.js

First download node from the official website nodejs.org, and install it.

2. Initialize NPM

Open vscode terminal. Run the command
npm init

Press enter to all the options(description, author, keyword etc.) one by one or put the information in every option(if you wish, but not mandatory). After that, package.json file will generate in your file structure.

3. Install Sass

Go to npm website to find sass package.

Execute the command on terminal
npm install sass

After that node_modules folder and package-lock.json file will be added the file structure.

4. Write sass Command

Go to the package.json file. In the scripts section remove "test": "echo \"Error: no test specified\" && exit 1" and add the small script

"scripts": {
    "scss": "sass --watch sass/style.scss css/style.css"
},

After executing the script, it will generate style.css and style.css.map in the css folder.

• If you want to avoid style.css.map file, the script will be ```

"scripts": {
"scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css"
},

* If you want to generate compressed css, then add the script

"scripts": {

"minify": "sass --watch sass/style.scss --style compressed css/style.min.css"
},

* Altogether

"scripts": {
"scss": "sass --watch sass/style.scss css/style.css",
"scss-no-source-map": "sass --watch --no-source-map sass/style.scss css/style.css",
"minify": "sass --watch sass/style.scss --style compressed css/style.min.css",
"minify-no-source-map": "sass --watch --no-source-map sass/style.scss --style compressed css/style.min.css"
},

### 5. Run the Script 
Execute the command on terminal to run the script

`npm run scss`
or
`npm run scss-no-source-map`
or
`npm run minify`
or
`npm run minify-no-source-map`


**_<u>Point to be Noted</u>_**
In html file, you must link with the css file generated in css folder.

![css link in html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf8gp2sq0tek8y189aob.jpg)

For more effectiveness, use [live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) on vscode.


HAPPY CODING!!!