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.

package.json file

3. Install Sass

Go to npm website to find sass package.

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

node_modules package-lock json file

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.

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
npm run scss-no-source-map
npm run minify
npm run minify-no-source-map

Point to be Noted
In html file, you must link with the css file generated in css folder.

css link in html

For more effectiveness, use live server extension on vscode.


Leave a Reply

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

Previous Post

C++ dasturlash tiliga kirish

Next Post

Plug & Play Auto Scaling of Redis Cloud

Related Posts