Setup Node SASS Watch

If your a frontend web developer, then CSS is your bread-and-butter. For a long time, CSS is all us frontend devs had.

CSS is pretty limited. It lacks variables and functions which can be quite useful for styling the frontend of websites, especially useful when it comes to complex custom designs.

If you’re a developer like me, and you like to stay on the cutting edge (its not so cutting edge anymore) of Frontend development then Sass is what you want.

In order to use Sass you’re gonna need a way to convert it into CSS because browsers can’t read Sass.

This is where Node comes into it..

Use Node to compile SCSS to CSS and Watch SASS files for changes

Need a simple way to output css from Sass? One simple way is to do the following:
CD into your project directory and install sass

Install Node modules into your project

npm init
npm install sass

Configure SASS Watch with CSS output

Note that the output of these files is relative to the ‘package.json’ file

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "sass --watch scss/style.scss:assets/custom.css"
  },

Example 2: Output css file into the same directory as your package.json file

Here we use a ‘.’ dot to output into the same folder as a package.json file. Which in my case is usually the theme root.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "sass --watch scss/style.scss:."
  },

Now, it’s execution time. In your project directory run the scss script.

npm run scss

Every time you save the style.scss file it will compile to custom.css the assets folder.