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: http://thiscodeworks.com/extension