Sass compile and watch changes Nodejs example|node-sass tutorial


Nodejs SASS npm library

Sass is an pre-processor language that converted to CSS, It provides lot of features variables, inherence and mixins.

SASS offers two different syntax and not covering detailed syntaxes in this post.

  • SCSS
  • SASS

Sass is SASSY CSS with indent syntax, that means no braces,semicolons and only indentation. scss syntax is similar to CSS with braces and semicolons.

Npm has a module called node-sass to convert SASS/SCSS into CSS files.

node-sass is an JavaScript version of libsass for sass pre-processor

Create A NodeJS application

Importantly, Please install NodeJS on your machine, node is command to run any JavaScript.

To make sure that node is installed or not, please run below command

B:\>node  --version
v10.16.3

Create empty folder node-sass-work

mkdir nod/e-sass-work
cd node-sass-work

Next, Let’s create a new application with npm init command in Application root directory

B:\blog\node-sass-work>npm init -y

T This will create a basic package.json file as seen below

{
  "name": "node-sass-work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add node-sass npm library to node application

Install node-sass in application with npm install command

npm install node-sass --save

This adds dependency in dependencies

{
  "name": "node-sass-work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^5.0.0"
  }
}

Let’s see some examples using node-sass library

Compile sass to css using command line with node-sass

First, to work in command line, you have to install globally with -g option

npm  install -g node-sass

This installs globally in your machine

To make sure that node-sass is working, please run the following command

B:\blog\node-sass-work>node-sass --version
node-sass       5.0.0   (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

So most Importantly, You might get an version mismatch issues if you are installing globally and local project.

Syntax:

node-sass options inputpath outputpath

Options:

  • -w watching changes for an file or folder
  • -r recursive watching changes of an file or folder
  • -o output directory

inputpath is an path of sass file or folder outputpath is an path of css file or folder

First create input.scss file Defined simple variables and mixins in sass file

$bold-weight: 700;
$border-radius: 4px;
@mixin padding-left {
	padding-left: 10px;
}

div {
	font-weight: $bold-weight;
}
input {
	border-radius: $border-radius;
	@include padding-left;
}

here is the command to run

B:\blog\node-sass-work>node-sass input.scss output.css
Rendering Complete, saving .css file...
Wrote CSS to B:\blog\node-sass-work\output.css

After, The output css file is

div {
  font-weight: 700; }

input {
  border-radius: 4px;
  padding-left: 10px; 
  }

use -o option, converting folder sass into css folder.

node-sass inputscssfolder/ -o outputcssfolder/

we have to use -w option for watching changes

node-sass -w inputscssfolder/ -o outputcssfolder/

Convert sass to css file/directory using npm scripts with node-sass

Let’s use the same above example,

In the package.json file, Please add below lines

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "compile": "node-sass input.css output.css"

  },

You can run using npm run compile command,

Uninstall node-sass from node project

Sometimes, these package has an version mismatch with nodejs installation.

It is not easy to remove with npm uninstall command, However, couple of steps need to be done s as follows

For this, We need to uninstall this with below command

npm uninstall node-sass

Next, package-lock.json has already For windows, Remove the package-lock.json file from applicaiton In Linux/Unix, Go to application directory

rm -rf package-lock.json

error

node-sass has a depdency with native OS for sass compiliation, Hence you might see lot of issues with installation of node-sass library.

node-sass command not found

if node-sass installed not correctly globally, Then might see an error - node-sass command not found

Please install node-sass globally with -g option

npm install node-sass -g

Some times An binding error occurred for your machine as seen Node Sass could not find a binding for your current environment

This error thrown while node not found binding for current running machine.

Please remove folder node_modules and package-lock.json file and issue following commands.

npm rebuild node-sass or 
npm rebuild node-sass --force

This will download correct bindings and build node-sass for your machine.

Conclusion

To sum-up this post, We learned basics of SASS in nodes, install and uninstall nodejs library and frequent issues that you are seeing while working with node-sass.

I hope you liked :-)

THE BEST NEWSLETTER ANYWHERE
Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts