visual studio code - Can't compile Sass file into CSS with Live Sass Compiler

Question

I can't compile Sass file into CSS using Live Sass Compiler. I have the following prompt in my main css file:

/* No CSS //# sourceMappingURL=style.css.map */

The No CSS might hint something, but I have no idea what.

Answer 1

After our extension is installed in VScode, we are going to look at some settings.

Go to settings (Click on the settings icon on bottom-left corner of your VSCode, and in the menu that appears click on settings).

Then a Search field will appear at the top, we will type and search for Live Sass Compiler.

Click on Live Sass Compiler once it appears and again click on Edit in Settings.json link and add following json:

"liveSassCompile.settings.formats": [
 {
  "format": "expanded",
  "extensionName": ".css",
  "savePath": "/dist/css"
 }
],

Save and we are good to go. I have provided a detail image by image explanation for ease here vs-code-live-sass-compiler-not-updating-files