[VSCode] VSCode로 Sass 컴파일하기

VSCode로 Sass 컴파일하기

Sass를 컴파일하기 위해 프롬프트에 직접 명령을 입력하는 방법, 기타 확장 프로그램을 사용하는 방법이 있다. VSCode의 확장 프로그램을 이용하면 버튼 한번으로 Sass파일의 변경을 지켜볼 수 있으니 훨씬 편한 작업 환경을 구축할 수 있다. 내가 사용하는 VScode의 Live Sass Compiler를 사용한 컴파일 방법과 설정을 정리한다.

Live Sass Compiler 설치

VSCode의 Extensions 탭에서 Live Sass Compiler 를 검색해 install로 설치해준다

설치시 기본으로 현재 워크스페이스에 열린 모든 폴더의 Sass 파일을 컴파일 한다. 불필요하게 컴파일되지 않도록 필요한 폴더만 지정해주거나 일부 폴더를 제외시킬 수 있다.

Live Sass Compiler 설정

VSCode에 설치한 확장 프로그램들에 대한 설정은 preference > settingExtensions 탭에서 가능하다. 또한 settings.json 파일에서 코드로 수정 할 수 있다.

확장에서 설정 가능한 사항은 아래와 같다

더 자세한 사항과 변동 사항은 Setting 문서에서 확인 가능하다.

Live Sass Compiler 사용하기

VSCode 실행 후 우측 하단의 Watch Sass 버튼을 누르면 Watching… 상태로 변경된다. scss/sass파일의 변화를 감지할 때마다 자동으로 컴파일 해 CSS파일을 갱신해준다.