Setting up the SASS with auto refresh functionality on vs code without live sass compiler on linux.

Sass is the most stable, and powerful CSS extension language in the world.

Sass

What is Sass?

Sass is a CSS pre-processor and powerful extension of css which was designed by Hampton Catlin.

Installation

Step 1 → install the npm [Node Package Manager]

We need npm package first to set up the functionality, open your terminal and simply check whether it is in your system or not by the below command.

npm -v → to check the version of npm as mine is 8.1.2

If you don’t get anything like this it means you need to install the npm. By below command you can install the npm.

sudo apt install npm → to install the npm.

Step 2 → Let’s create a directory for the for the sass installation and setup.

Simply create a directory with any arbitrary name as i created with Sass and open that directory with vs code by following these commands.

commands to create directory and run vs code into same directory

1. mkdir Sass → this wil create a directory of name Sass .

2. cd Sass → this will change the directory into Sass directory.

3. code . → this command will open vs code in this directory.

Visual studio code into sass directory

Step 3 — Initializing the npm

Let’s initiate the npm package in this directory by init -y command on terminal and you will see this output as well as a package.json file into your directory. We will edit this file later on in the end.

init -y → it will initiate the npm into the directory..

vs code with initialized npm with packge,json file

step 4 — Installing the SASS in the directory.

Let’s install the sass in the directory by following npm install sass — save-dev command. You will see some output like this as well as in your vs code with new directory named node_modules and one file package-lock.json.

npm install sass — save-dev → to install the sass in the directory

Installed sass directory with node_modules

Step 5 — Create a source directory for the .scss files.

Now you can directly create directory with vs code as well as with terminal with any arbitrary name i created with src and undr src i created the scss directory and then i created the main.scss file — our sass file.

src diretory,scss dir*, main.scss file

Step 6 — Now comple scss file into css by watching the sass.

You can also open terminal into your vs code and run all the previous commands as well as upcoming too. Below command i will run with vs code terminal as sometime its weird to toggle again and again with applications.

Now run command { sass — watch src/scss: dist/css}

sass — watch src/scss:dist/css

What this command will do ??

This will watch the sass file into src/scss directory and this will compile the sass after compiling this will create the dist directory into the main sass directory and under the dist the compiled css will be there as you can see in the above image it has created the dist directory and under that the complied css.

But you will notice that live reloading is not there but we will set up this thing .

Step 7 — Setting up live reloading with parcel package.

Now lets install the parcel package with the help of npm.

Simply type npm install parcel-bundler — save-dev on terminal

npm install parcel-bundler — save=-dev → to install the parcel package

Now if you will open the package.json file you will see the parcel in your devDependencies just like below…

parcel bundler in your dev dependencies

Step 8 — Creating html file into src directory

Let’s create the index.html file in the src directory and then link with main.scss file instead of main.css file and remove the dist folder from the main sass directory. As this will create automatically when in last step we will setup the auto refresh.

Step 9 — Edit the script of package.json file as we mentioned in the beginning.

Now you need to delete all the content in the script area and write the below mentioned and save your file.

Final Step :: Running our project

Simply type npm run dev on your terminal and this command will run dev environment which compile sass into scss and this will also create the dist directory.

npm run dev → to run the auto refresh

Now you can edit the html file into your src directory and main.scss file under the scss directory and open any browser and paste the link → http://localhost:1234 or localhost:1234 to debug…

Now you will see that page will auto-refresh without live server…………… Have Fun.