[VSCode] Sass Live Compile 설정하기

sass를 사용하기위해서 몇가지 셋팅이 필요하다.

컴파일을 할때 어떠한 형식의 css로 컴파일을 할것인지부터 시작해서 어떤 특정 scss파일만 도출해 낼것인지까지 다양한 옵션으로 셋팅이 가능하다. 

 

1. 플러그인 live sass compiler와 Sass 설치하기

live sass compiler와 Sass 설치

2. 불필요한 공백 모두 제거(compressed)와 특정 파일 main.scss, sub.scss만 컴파일 하며 오토프리픽스로 크로스브라우징(브라우저별 인식 코드 자동 삽입)을 할 예정이다.

ex) display: flex;만 작업자가 scss에 작성하여도, 자주 사용하는 브라우저들의 프리픽스를 선언하여 인식할 수 있게 해준다. display: flex;를 컴파일한 결과는,

display: -webkit-box;

display: -ms-flexbox;

display: flex;

 

아래와 같이 settings.json 파일에 코드를 추가한다.

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

또한 컴파일 할 경로를 지정하고, .min 형태로 컴파일 되는 옵션도 추가하였다.

map 파일이 생성되는것 또한 false로 해제하였다.