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.

Join the Conversation

2 Comments

Leave a comment

Your email address will not be published. Required fields are marked *

css.php