개요

Sass는 CSS 전처리기로, CSS를 보다 간편하고 유지보수하기 쉽도록 작성할 수 있게 해줍니다. VSCode는 Sass 파일의 변경을 감지하여 실시간으로 CSS 파일을 업데이트할 수 있습니다. 이번 블로그에서는 VSCode에서 Sass 파일 변경 감지하는 방법에 대해 알아보겠습니다.

단계별 설명

1단계: 확장 기능 설치

VSCode의 확장 기능을 이용하여 Sass 파일 변경을 감지할 수 있습니다. VSCode의 왼쪽 사이드바에서 “Extensions” 아이콘을 클릭한 후, “Live Sass Compiler”를 검색하여 해당 확장 기능을 설치합니다.

2단계: 설정 구성

VSCode에서 “File” 메뉴를 선택하고, “Preferences” > “Settings”를 클릭합니다. 검색창에 “Live Sass Compiler”를 입력하고, “Edit in settings.json”을 클릭하여 설정 파일을 엽니다.

3단계: 설정 파일 수정

settings.json 파일 내에 아래와 같이 Sass 파일 경로와 CSS 파일 경로를 설정합니다:

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/path/to/output"
    }
]

위 코드에서 /path/to/output을 작성하는 부분을 실제 CSS 파일이 생성될 경로로 수정해야 합니다.

4단계: Watch Sass 실행

이제 “File” > “Preferences” > “Extensions” 메뉴로 돌아가서, 설치한 “Live Sass Compiler”를 찾아 활성화합니다. 이제 VSCode는 Sass 파일을 변경 감지하고, 해당 파일을 저장할 때마다 CSS 파일을 자동으로 업데이트합니다.

결론

VSCode를 사용하면 Sass 파일을 효과적으로 수정하고, 실시간으로 CSS 파일을 갱신할 수 있습니다. 이를 통해 개발 작업을 보다 효율적으로 수행할 수 있습니다.

#VSCode #Sass #CSS #확장기능