Open In App

How to see the changes in whole directory/folder containing many sass files ?

Last Updated : 27 Apr, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

SASS is a powerful preprocessing language that helps us to write our code more efficiently in an easy and concise manner. Some of the best features of sass are using variables, support nesting, and using functions. While it has many advantages, keeping track of all the changes in a sass file could seem like a complicated task.
The easiest method to compile changes in a sass file can be done with the help of Node Package Manager(NPM).
For this, you will need to install the latest version of Node.js or have a stable LTS version of the node. To check if you have properly installed Node.js in your system run the following commands in your terminal/command-prompt:

node -v 

npm -v 

After installing the latest version of Node.js, follow these steps to compile your sass files. These are:

  • Initialize NPM in your root directory using the terminal.
    npm init

    The npm init command will ask some questions to generate a package.json file in your project. This file contains the information about your installed dependencies.
    In order to bypass these questions you can type the following command:

    npm init -y

    This will automatically set the options to default values.

  • Install node-sass.
    npm install node-sass --save-dev
    

    Node-sass is a library that natively compiles scss to css files. This command will install node-sass as a development dependency.

  • In the package.json file, you need to make changes to the scripts field.




    "scripts" :{
      "compile:sass": "node-sass sass/main.scss css/style.css -w"
    }

    
    

    This command tells us to look for our main sass file and compile it into CSS. -w stands for watch flag which is used to keep track of all the changes in the source file and re-compiles each time the sass file is saved.

  • Run the command in your terminal: Open the terminal and run the command:
    npm run compile:sass
    

Similar Reads

How to see the Changes in a Git commit?
Understanding the changes introduced in each commit is crucial for effective collaboration and version control in Git. Whether you are reviewing someone else's work or tracking your own modifications, Git provides powerful tools to inspect changes. This article will guide you through the various methods to see changes in a Git commit. What is a git
4 min read
Why Node.js doesn't see files in node_modules folder ?
Sometimes developers want to serve some static asset from node_modules. Usually, we don't want to expose any of your internal paths to the outside world. If your files are in the node_modules directory then you can make a static route in your server that fetches its files from whatever directory you specify. The express.static() function is used to
2 min read
React Suite DateRangePicker Select Whole Week, Whole Month
React Suite is a front-end UI library built on top of React that lets us many pre-built components to our react application. It is a developer-friendly library and is a great base for building scalable and beautiful websites and applications. In this article, we will see React Suite DateRangePicker Select Whole Week, Whole Month. The DateRangePicke
3 min read
Sass sass:list Module
SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:list module that makes it possible to access and modify values in a list. Not
4 min read
Sass sass:color Module
SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:color module. This module is used in order to create new colors from the exis
3 min read
Sass | sass:map module
The sass:map module gives functions that makes it possible to look up the values associated with the key of a map. Some of the major functions are listed below: map.get(): This function returns the value associated with the given key in the map. In case, no value is associated then it returns null. Syntax: C/C++ Code map.get(map, key) map-get(map,
2 min read
SASS sass:string Module
The sass:string module makes it easy to combine, search, or split strings apart. The following are the list of functions that can be used using this module. 1. string.quote() function: This function returns a quoted string. Syntax: string.quote(string) quote(string) Example: @debug string.quote(GeeksForGeeks); @debug string.quote("GeeksForGeek
3 min read
SASS | Use variables across multiple files
To use variables across multiple files in SASS is carried out by @import rule of SASS. @import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions.Such that combine all stylesheets together for compiled css. It also imports URL such as frameworks like Bootstrap etc.. The @import no longer encouraged in future u
3 min read
How to see the extensions loaded by PHP ?
To see all the extensions loaded by PHP, firstly we must be sure that PHP is successfully installed in our system. After that, we can use any of the following approaches to see the loaded extension list. Approach 1: In this approach, we will use command line to check all the loaded PHP extensions. Open Terminal or Command Line Interface and type th
1 min read
How to make whole row in a table clickable as link in Bootstrap ?
Tables in Bootstrap can be formed either using traditional <table> tags or using the in-built 'grid' system. Earlier, <table> tags were often employed to designing grids for the sites, but nowadays with flexbox and table display properties in CSS, it is easier to just use divs. In the following examples, we'll see how to make a complete
3 min read
Article Tags :