How to Set Up Sass Using NPM

1. In main project folder, (outside of dist folder if using one), create a folder calledscss, andmain.scss file within the newscss folder.

2. Right click up-one-level folder from dist and open in terminal (i.e. in terminal, go to your dist folder, then do '$ cd ..')

3. In terminal, do$ npm init to create a package.json file.

4. Enter package name and details.

5. In terminal, do$ npm i node-sass to initialize sass.

6. Openpackage.json file, change:
   

"scripts":{"test":"echo\"Error: no test specified\" && exit 1"},

to:

"scripts":{"sass":"node-sass -w scss/ -o dist/css/ --recursive"},

NOTE: File directories in the script must match your folder layout!

For example, if you don't have adist/ folder, just use... -o css/ --recursive instead.

NOTE: Make sure to point your stylesheet correctly in your html code!

For example, if usingmain.scss (and thusmain.css), use:<link rel="stylesheet" href="css/main.css">

1. In your terminal, start the Sass script with:npm run sass.

2. Inmain.scss, start writing your sass.

NOTE: Do not edit yourmain.css file. The Sass compiler will overwrite any changes you might make, so be sure to write your CSS directly tomain.scss.