How to see the changes in whole directory/folder containing many sass files ?
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 initcommand 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.
"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.
-wstands 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