Sass compile and watch changes Nodejs|node-sass tutorial

Sass compile and watch changes Nodejs|node-sass tutorial

You can also check other posts on npm command deprecate option is deprecated

Nodejs SASS npm library

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

SASS offers two different syntaxes and does not cover detailed syntaxes in this post.

  • SCSS
  • SASS

Sass is SASSY CSS with indent syntax, which 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 a JavaScript version of libsass for sass pre-processor compilation.

Create A NodeJS application

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

To make sure that the node is installed or not, please run the 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 the npm init command in the 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 the application with the npm install command

npm install node-sass --save

This adds the dependency to 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 the node-sass library.

How to Compile sass to CSS using the command line with node-sass?

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

npm  install -g node-sass

This installs globally on 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 version mismatch issues if you are installing globally and locally in an application

Syntax:

node-sass options inputpath outputpath

Options:

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

inputpath is a path of sass file or folder outputpath is a path of a CSS file or folder

First, create an input.scss file Defined simple variables and mixins in the 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 the -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 the 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 a version mismatch with nodejs installation.

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

For this, We need to uninstall this with the below command

npm uninstall node-sass

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

rm -rf package-lock.json

error

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

node-sass command not found

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

Please install node-sass globally with the -g option

npm install node-sass -g

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

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

Please remove folder node_modules and package-lock.json file and issue the 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 the 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 it :-)