[VSC] Sass CSS 컴파일하기 (Live Sass Compiler)

cmd 창에서 한참을 일괄 트랜스파일링이 안되서 이거저거 해보았는데

(결국 폴더 경로의 문제였지만) 

찾아보다 보니 VSC 에 역시나 확장 프로그램이 있었다. VSC 최고

 

방법

1. Extensions(shift + ctrl + x)에서 Live Sass Compiler를 설치한다. 

 

2. settings.json 파일에 SASS 컴파일러 설정을 추가한다. 

SASS 컴파일러 설정

"liveSassCompile.settings.formats":[
    // 기본설정
    {
        "format" : "expanded",
        "extensionName" : ".css",
        "savePath": "/폴더명/폴더명1/css"
    },
    // 추가하여 작성가능
    {
        "format" : "compressed",
        "extensionName" : ".min.css",
        "savePath" : "/dist/css"
    },
],
    // map 파일 사용 유무(Default : true) - 소스맵 사용안할 경우 false로 설정
"liveSassCompile.settings.generateMap": false

savePath : 컴파일 되어 저장되는 경로 설정

format : css 로 컴파일 하는 종류 

extenstionName : 컴파일 하는 css 이름

 

3. 최 하단 Watching... 클릭 Watch Sass 로 변경되며 자동 컴파일 된다. 

 

근데, 

왜 파일이 한개밖에 컴파일이 안되고 있는 걸까.... 

(해결중..)