Sass Setup and Basic Use

How to Set Up Sass Using NPM

1. In main project folder, (outside of dist folder if using one), create a folder called scss, and main.scss file within the new scss 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. Open package.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 a dist/ folder, just use ... -o css/ --recursive instead.

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

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

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

2. In main.scss, start writing your sass.

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