node-sass cheat sheet

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

Setup Project

• 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 node-sass --save-dev
  • creates project_name/node_modules/all-packages-inside
  • updates package.json with the following:

  "devDependencies": {
    "node-sass": "^4.12.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": "node-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 (node-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.