Watch & Compile your Sass with npm.

📣 👋 Hey everyone!

This article is almost 2 years old!
I’m glad that it’s still helping people after all this time. But, this 2-year-old article has some issues:

I wrote a better way of using using node-sass with npm that addresses a lot of the comments I’ve received from y’all. You can find this tutorial (with source code) on my GitHub: Using node-sass

Check it out, and feel free to send a PR or open an issue if you see any other problems. 🍻

I build a lot of websites and simple prototypes using Node.js and Sass.

Both of them are great for what I do at work and for my own side projects.

Where I work at Bluemix, we’re interested in using the least amount of package managers possible to simplify how we work with the front-end of our code bases. Speaking just for myself, I’ve been slowly catching on to using npm as my package manager and build tool.

I’m also kind of lazy.

Have you ever wanted to write a single starting command for your app? In the best case scenario, for simple projects, my terminal usually looks like this:

iterm2 for mac using ohmyzsh

This is fine. We can make this better. But I want this article to be a baby first step into showing how npm can be an asset pipeline and build tool by enabling you to do two things:

Pre-requisites

You need Node.js installed on your computer.

If you’re on a Mac, I recommend installing Homebrew, a package manager for mac.

After installing this, you can install Node.js by doing:

$ brew install node

If you want more details on installing Node.js, check out this article from Treehouse.

Getting Started

Open terminal and create a new folder for our project.

$ mkdir portfolio && cd portfolio

Create a package.json file and follow the prompts.

$ npm init

Now let’s set up our files. Create these folders:

$ mkdir bin public scss && mkdir public/css

Now let’s create some files:

$ touch scss/main.scss .gitignore

Now your file structure should look like this:

material design theme on atom

Simple Sass compiler and watcher

When I started playing around with npm scripts, my original intention was to stop using gulp and try to write everything I needed using things like node-sass, autoprefixer, and browsersync without their respective gulp tasks.

In this section, I’ll show you how I made a simple sass compiler and watcher without using gulp.js and only using npm scripts.

This section will probably be the simplest example for understanding npm scripts so let’s diiiiive in.

Sploosh!

Install the things

Let’s install our dev-dependencies:

$ npm install -D node-sass nodemon

Compile the Sass

Before we write our first script, write some dummy scss in your main.scss file so node-sass can use that to compile.

$badass: #bada55;body { 
margin: 0;
background-color: $badass;
}

Now, let’s write a command line script for compiling our scss files using node-sass.

In your package.json, find the “scripts” object and inside, write the following code:

“scripts”: {
“build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”
},

In your terminal, do this:

$ npm run build-css

Whoa! Stuff happened!

Go look at your main.css file and you’ll see that node-sass indeed compiled your scss file to css. Awesome!

Watch the Sass

Let’s update our scripts with a watch script. Inside package.json, make your scripts object look like this:

“scripts”: {
“build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”,
“watch-css”: “nodemon -e scss -x \”npm run build-css\””
},

Now let’s try it in the terminal!

$ npm run watch-css

Open up your text editor and start writing some more styles in your main.scss file. Now check your main.css file and the terminal. You’ll see that whenever you save new styles to main.scss, those changes will re-compile to create updates to main.css and you’ll see some feedback from your terminal, like this:

So congrats! You’ve built your own sass compiler and watcher that you can start using npm scripts.

If you decide you want to stick with this, let’s capture the node-sass and nodemon scripts in their own executable files.

Refactor: Move scripts into their own files

Create a build-css file and a watch-css file (no file extensions) inside the bin folder.

$ touch bin/build-css bin/watch-css

We can clean up these files so we don’t have to escape any quotes. For example, your build-css file should look like this:

node-sass --include-path scss scss/main.scss public/css/main.css

And your watch-css file should look like this:

nodemon -e scss -x “npm run build-css”

We also need to make both of these files executable.

Do this in your command line:

chmod +x bin/build-css
chmod +x bin/watch-css

Now go back to your package.json file and change the scripts to reference the relative paths of our new bin files. So, it’ll look like this:

“scripts”: {
“build-css”: “./bin/build-css”,
“watch-css”: “./bin/watch-css”
},

This is a lot cleaner looking, right?

Now try running npm run watch-css again and you’ll see it should work just the way it did before.

Thanks for getting this far and taking the time to follow along with this article! You can find all this code up on my GitHub.

Obviously this is missing a lot of stuff that I usually like to have in my projects, like live-reload and autoprefixer.

At least for now, you can see the source code for everything covered in this article by visiting my GitHub repo here.

Anyway, thanks again for reading. Here are some puppies.

UX Developer @ Indeed // Previously: Accenture, IBM, Carbon Design System

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