How to import SASS through npm ?

Introduction to SASS: SASS stands for 'Syntactically awesome style sheets'. It is an extension of CSS, that makes it easy to use variables of CSS, nested rules, inline import, and many other important features SASS has two syntax options:

• SCSS (Sassy CSS): It uses the .scss file extension and is fully compliant with CSS syntax.
• SASS: It uses .sass file extension and indentation rather than brackets.

Note: Files can be convert from one syntax to another using sass-convert command. Steps to install SASS: Step 1: To install SASS, first make sure that node and npm are already installed in the system. If not, then install them using the instructions given below.

• First, download the latest version of a node in the system and install it.
• Now go to command prompt and address the folder where you want to install SASS.
• After that, you have to create package.json file. It manages the dependencies of our project.
• Use command written below that will ask for the package name of the user's choice and the description. Some more formalities are there, just press enter for that and your package.json file will be created.

  npm init

Step 2: Now to install SASS one simple command is used:

npm install node-sass --save

Note: - --save in above command is used to save the SASS in dependencies of json file. Now SASS has been installed in your system successfully. Step 3: To work with SASS, go to package.json file in your project, i.e. if you are working with VSC, open your project there and then open package.json file. You will get package.json file like:

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

Remove the "test" script and add your own script of name compile: sass(any other name can be chosen), give the link of your sass file as a target. package.json should look like this:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "compile:sass": "node-sass scss/style.scss css/style.css"
    },
    "author": "",
    "license": "ISC"
}

Now go back to command prompt and run command

npm rum compile:sass

Or just add node-sass script like this: Open the package.json file in your text editor of choice, and add the following line inside the "scripts" object:

"scss": "node-sass --watch assets/scss -o assets/css"

package.json file look like this:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "scss": "node-sass --watch assets/scss -o assets/css"
    },
    "author": "",
    "license": "ISC"
}

Save the file and close it. Now in the root of the project directory, run command given below to start watching for any changes to your .scss files.

npm run scss

Alternative ways to install sass: It is good to know a little bit of extra. So for installing Sass, there are some alternative ways too. You can install Sass via paid and free applications such as Codekit. You can install Sass by downloading the package from the Official Github Site and add it directly to your path. To install node-sass: Once you install npm, it’s time to install node-sass. You can do so by running this command in your terminal to install the package globally.

npm install -g node-sass

or you can run above command without the -g flag to only install to your current directory as below.

npm install node-sass