How to Add and Compile SCSS to Run Automatically in the Background on an existing Node.js project

When I first started to learn web development, I learnt the good old HTML, CSS and Javascript. And they were adequate. Good enough to help me build and launch some projects online.

But after a year of coding, I came across SASS and fell in love with it. It just made all my CSS styles clean and organized, and quickly became my default setting for any new project.

And while it was a joy to use in my new stuff, I would instantly be put off when editing old projects. So many lines of code to sift through. Where are the variables? The mixins?

So one day I finally got around to making the switch in a safe way and I couldn’t be happier. It just takes 3 steps.

This tutorial assumes you have a node.js project up and running with npm installed.

1. Install node-sass

To get the compiler, we’re going to install the node-sass package.

Go to your terminal, navigate to the project folder and type in the following:

npm i node-sass

2. Create an SCSS folder

Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.

Kinda like this

Rename the extensions on all the newly pasted css files with .scss

You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.

3. Add a script in package.json

In your package.json file, locate scripts and add the following piece of code inside it:

"scss": "node-sass --watch scss -o css"

If your css folder is named something other than css, then replace the word css with the folder name.

Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.

Setting context in the overall package.json file, the script will be placed like this:

{   “name”: “example-project”,   “version”: “0.4.2”,   “scripts”: {      “start”: “node ./bin/www”,      “scss”: “node-sass — watch scss -o css”},
"dependencies": {
"express": "~4.16.0", "express-favicon": "^2.0.1", }

4. Run the compiler

Get back into terminal and run the following commandL

npm run scss

Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.

PS. We’re building a Chrome extension to save code that works directly from your browser. If you want to be a beta tester, sign up here:




Creator of \n Follow me @mishkaorakzai on Twitter. I write at

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Authenticate React Applications with Asgardeo-Part 1

Asgardeo and React logos

An overview of JavaScript iterators

JavaScript Array Methods (SORT)

Roman characters to Integer

Deploy a VueJS App with DigitalOcean

Getting what you’ve Promised

Classifying categorical data in Weka via the API

Using Web Workers in Typescript React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Creator of \n Follow me @mishkaorakzai on Twitter. I write at

More from Medium

My Experience during the Application Frameworks Group Project

The Fitmeals clone

A Walkthrough for fetching API

Handling Undo/Redo Functions in Rich Text Editors