How to import SASS through npm ?

02 Oct, 2020
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
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
andreasschlapbach
CSS-Misc
Picked
SASS
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Design a Tribute Page using HTML & CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array