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

scss compile automatically node.js

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

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

npm i node-sass

2. Create an 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

"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

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

Creator of thiscodeworks.com \n Follow me @mishkaorakzai on Twitter. I write at mishka.codes