Basic SCSS and HTML setup on MacOS Catalina 10.15.2

Pre-requisites:

Node 10.11.x and npm 6.X or above

Create a project folder and initiate npm, in the terminal execute:

mkdir my-new-project && cd my-new-project && npm init -y

npm install save-dev node-sass

npm install live-server

Then create two folders:

mkdir scss && mkdir css

Inside of those folders create two files:

cd scss && touch style.scss && cd ..

cd css && touch style.css

Go to the package.json file and add the following on the “scripts” array

"sass":"node-sass sass/style.scss css/style.css -w

That means that node will be “watching” or listening for changes on the css file. When something is changed, the scss file will be recompiled on css.

Be sure to link your index.html file to the css style sheet by including in the head of your index-html the following:

<link rel="stylesheet" type="text/css" href="css/style.css">

Save, and run live server by doing live-server

It will compile every time you change something on the scss file and the live-server will reflect it on the browser.