Below describes the main steps for setting up a project folder to be able to compile scss files to your css files.

Setup Project

• Make sure you have node installed
  • in your terminal try the command node --version if you receive a version number like v12.18.0 it’s installed.
  • otherwise install node.js
• Required files / directory structure
  • project_name/css/style.css
  • project_name/sass/main.scss
• Create the project’s package.json file. Using the terminal:
  • navigate to project_name
  • run npm init following the instructions
  • creates project_name/package.json
• Install Sass. Using the terminal:
  • navigate to project_name
  • run npm install sass --save-dev
  • creates project_name/node_modules/all-packages-inside
  • updates package.json with the following: "devDependencies": { "sass": "^1.0" }

• Setup compile scss to css script
  • navigate to project_name
  • update package.json with the following line in the "scripts" object:
    "scripts": { "compile:sass": "sass sass/main.scss css/style.css -w" },

• Run scss to css compiler. In the terminal:
  • Navigate to project_name
  • call npm run compile:sass
  • saved changes to main.scss will call the compiler and update style.css
  • to exit the compiler, either close the terminal window or use ctrl ^c to exit the process.

Transfer project

• Transfer files / folders
  • project_name/css/style.css
  • project_name/img/all-files-and-folders
  • project_name/sass/all-files-and-folders
  • project_name/index.html
  • project_name/package.json
  • DO NOT INCLUDE project_name/node_modules/
• In renamed project_name_v2 with all transferred folders and files. In the terminal:
  • Navigate to project_name_v2
  • Call npm install – this looks at your package.json file and installs any saved dependencies (sass) and recreates the project_name_v2/node_modules/with-all-required-packages
• Run scss to css compiler. In the terminal:
  • Navigate to project_name_v2
  • call npm run compile:sass – saved changes to main.scss will call the compiler and update style.css
  • to exit the compiler, either close the terminal window or use ctrl ^c to exit the process.