[SASS] 설치하기 2편 ( vscode편 )

설치하기를 쓰고 공부를 시작할려고 하자마자 바로 불편함을 느꼈다ㅋㅋㅋ...내가 설치한건 컴파일러..

css는 저장만 하면 바로 적용된걸 볼 수 있는데.. scss로 할려니 scss파일을 만들고 > 컴파일하고 > css 바꿔주고

이짓을 해야한다고..?

 

바로 다시 검색하러 갔다ㅋ큐ㅠㅠ

나는 원래 메모장같은 nodepad나 sublime text같은 친구들을 주로 사용했는데,

scss를 사용하기 위해 알아보다 visualstudio code라는 친구를 접했다.

(비쥬얼스튜디오 오랜만이야... 응용할때만 봤었는데)

 

 

1. 설치 https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

2. scss 컴파일을 해줄 패키지 설치 ( sass와 live sass compiler )

vscode sass 패키지 설치

3. 그럼 아래에 watch sass와 go live라는 글자가 생긴다.

   watch sass를 누르면 scss파일이 컴파일 되며, go live를 클릭시 말그대로 실시간으로 볼 수 있다 :)

   하지만 watch sass를 누르는것 마저 귀찮으니 설정을 하나 더 해주자.

4. file > preferences > setting을 내리다 보면 Edit in setting.json이라는 글자를 클릭

그럼 해당 파일에서 아래와 같이 저장될 파일 경로와 map파일 생성 여부 및 내가 수정중인 파일만 컴파일 할 수 있도록 설정해주면 끝이다 :)

{
    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"      
        }
    ],
    "liveSassCompile.settings.generateMap": false, 
    "liveSassCompile.settings.includeItems":[ "scss/*.scss" ]
}

 

 

참고 : https://bbol-world.tistory.com/80

참고 : https://mahyuna.tistory.com/4