[VSCode] Sass Live Complie 설정하기

SASS를 VSCode에서 사용하기 전에 몇가지 셋팅이 필요하다.

 

1. 어떤 파일을 컴파일 할것인가?

2. 컴파일한 css는 어떤 형태로, 어디에 저장할 것인가?

3. 오토프리픽스 즉, 브라우저 마다 지원하는 스타일로 변환을 할 것인가?

4. 컴파일시 .map 파일도 추가할 것인가?

 

1. 답 : 여기서는 style.scss만 컴파일 할것이다.

2. 답 : 여기서는 compressed(압축으로 기본 min 확장자명을 가진 파일)로, scss파일이 위치한 동일 선상에 저장할 것이다.

3. 답 : O

4. 답 : X .map파일은 추후 이 클래스의 스타일이 어디에 위치해있는지 보여주는 파일로 유용하게 쓰이기도 한다.

 

[설치할 플러그인]

Sass

Live Sass Compiler

 

[셋팅 방법]

왼쪽 하단 톱니바퀴 아이콘 클릭 > Settings 클릭 > 검색창에 "sass live compile" > 리스트 중 Live Sass Compile > Settings: Formats의 Edit in settings.json 클릭

아래와 같이 코드를 추가한다.

"liveSassCompile.settings.formats":[ {
    "format": "compressed", 
    "extensionName": ".min.css", 
    "savePath": "~/../style/" } ], 
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.includeItems": [
    "style.scss"
],
"liveSassCompile.settings.excludeList": [
    "~/../style/*[!(style)].scss"
],
"liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions" ],

 

참고로, SASS 컴파일시, 하단 Watch Sass를 클릭하여 Watching... 으로 변경후 해당 scss 파일에서 저장을 하면 자동 위의 설정한 데로 컴파일된 css가 쌓일 것이다.