Sass settings in VS Code

1. VS Code에서 extensions > Live Sass Complier를 설치합니다.



설치를 하면 VS Code 하단의 패널에 “Watch Sass” 아이콘을 볼 수 있습니다.



2. VS Code에서,
(1) Ctrl + Shift+ p > Preferences: Open Settings (JSON)을 클릭합니다.

(2) “settings.json”파일에서 하기의 코드를 입력합니다.

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

(3) scss파일을 작성한 후,

1. 하단 패널의 Watch Sass 버튼을 클릭하면, Watching...으로 버튼이 변하면서 css로 컴파일합니다.
2. “settings.json”에서 설정한 것처럼 dist라는 폴더를 생성하여 저장합니다.
3. 이후, live server를 통해 브라우저 창에서 해당 html 파일에 css가 실시간으로 적용되는 것을 확인할 수 있습니다.

How I setup VS Code for a beginner front-end workflow by Jessica Chen, Coder Coder

Live Server와 Live Sass Compiler를 만든 이의 github
ritwickdey/vscode-live-sass-compiler