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

--

--

--

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

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

Recommended from Medium

GraphQL Resolvers + Ramda = CRUD

Immutably Rename Object Keys in Javascript

How To Develop and Build MERN Stack

How To Run VueJS With NodeJS Backend on AWS App Runner

Publishing React Libraries Made Easy

How to win a Facebook Poke Battle (using jQuery)

Refining our Phaser game (part 1 — Refactoring components into their own classes)

8 tips that will keep you sane while you’re trying to learn Frontend.

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
Mishka

Mishka

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

More from Medium

Buy Me a Coffee | Made with Nuxt JS

Disable inspect element — DevTools in your Website

Optimized way to save the sort order Into DB using “SortableJs, Vue draggable next or react-dnd…

Todo list with two drag area and sortable item

Svelte vs Vue: Which Front-End Framework is Right for You?

Svelte vs Vue