VScode SCSS(sass) 사용하기

VScode SCSS(sass) 사용하기

VScode SCSS(sass) 사용하기 위한 설정 방법을 알아봅시다.

---

설치 프로그램

SCSS를 사용하기 위해서는 설치해야하는 확장 프로그램이 있습니다.

검색

Extensions에서 확장프로그램으로 Live Sass Compiler, Sass를 검색합니다.

설치

Install을 눌러서 설치를 합니다.

Watch Sass

하단에서 Watch Sass가 나오는지 확인합니다.

실행시키기

설치를 했지만, 제대로 동작하지 않습니다. 설정을 진행합시다

Preference Open User Setting(JSON)

F1으로 JSON파일에 접속을 합니다.

json

json 파일을 검색해서 파일의 내용을 수정합니다. 코드를 넣어주어서 문제를 해결합니다.

코드

하단의 코드를 넣어봅시다.

"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
    // {
    //   "format": "expanded",
    //   "extensionName": ".css",
    //   "savePath": "~/../css/"
    // },
    {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "~/../css/"
    }
]