DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 5 Quick Steps Transpiling SCSS to CSS Using Node (with watch & minify mode)
Sampad Sarker
Sampad Sarker

Posted on

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"
},
Enter fullscreen mode Exit fullscreen mode

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"
},
Enter fullscreen mode Exit fullscreen mode
  • If you want to generate compressed css, then add the script
"scripts": {  
    "minify": "sass --watch sass/style.scss --style compressed css/style.min.css"
},
Enter fullscreen mode Exit fullscreen mode
  • 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"
},
Enter fullscreen mode Exit fullscreen mode

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

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.

HAPPY CODING!!!

Top comments (0)

Earn our Top 7 Badge!

Write a post that gets featured in our weekly "must-reads" and you can earn this badge for your profile. 😎