This is a tutorial for using the “Live Sass Compiler” extension as an alternative to using node and “node-sass” as presented in Jonas’s tutorials.

Install the Extension “Live Sass Compiler”

Update your Settings JSON in VSCode

Using the command palette in VSCode

add the following key/value pairs to your JSON

 "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.excludeList": [
    "/**/node_modules/**",
    "/.vscode/**"
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css/"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/css/"
    }
  ]

Use the sass filename “style.scss” instead of “main.scss”

Always open the folder in VSCode of the natours project

Run the compiler in the background using “watch sass”

When done you can stop watching sass