CSS Sass Compiler- VSCode에서 작업영역에 여러 폴더를 추가해서 사용할 때 scss savePath 설정하는 방법

VSCode를 이용할 때 하나의 작업 영역에 여러 개의 폴더를 추가해서 작업할 때가 있다. 이럴 때 Sass 컴파일러의 savePath설정에 따라서 다른 작업 폴더에 저장되는 경우가 있다. 이럴 때 해결방법을 알아보자.

savePath 설정

 

 

 

 

settings.json 열기

savePath를 설정하기 위해서 setting.json 파일을 열어야 한다. VSCode를 실행 후 "F1"을 누르면 화면 중앙 윗부분에 검색창이 뜬다. 여기에 "setting.json"이라고 적어주고 "Preferences: Open Settings (JSON)"을 선택한다. 그럼 settings.json파일이 열린다.

liveSassCompile.settings.formats

그럼 이젠 "liveSassComplie.settings.formats"라는 키값을 찾아야 한다. 찾았다면 다음과 같은 형식으로 적혀 있을 것이다.

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

값들은 여러가지 모습을 하고 있을 것이다. 여기서 눈여겨봐야 하는 부분이 "savePath"부분이다. savePaht에 작성된 현재 위치(.)를 정확히 안다면 여러 개의 폴더를 켜 두었더라도 문제없다.

현재 폴더 위치를 나타내는 "./"는 작업 영역의 첫 번째 폴더를 나타낸다

savePath에서 위의 예처럼 작성하면 첫 번째 폴더 내에 assets> css폴더를 만든 후 컴파일한 css파일이 저장된다. 그럼 어떻게 해야 현재 작업하는 폴더 위치로 올 수 있을까?

현재 작성 중인 Scss파일의 위치는 "~/"이다

작성중인 Scss파일의 위치를 "~"를 이용해서 표시할 수 있다. 따라서 다음과 같이 작성하면 Sass파일이 있는 위치에 assets> css폴더가 생성된 후 컴파일된 css파일이 저장된다.

"liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/assets/css"
        }
    ]

이 것을 응용하면 원하는 위치에 assets 폴더를 생성하고 관리할 수 있다. 다음과 같이 폴더 구성을 했을 시 css폴더에 css를 저장하기 위해서는 savePath를 어떻게 수정해야 할까?

VSCode 파일탐색기

다음과 같이 해주면 된다.

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

왜냐하면 이미 Scss 파일이 assets 폴더 내의 scss 폴더에 작성되었기 때문이다. 따라서 부모 루트로 한 번 올라간 후(../) css폴더를 선택해 주면 된다.