[Sass/Scss] Live Sass Compiler를 사용해 컴파일된 css파일 경로 자동으로 바꾸기

1. VS code > settings로 이동하기

 

2. live sass compile 검색 > Edit in settings.json 클릭

 

3. 아래의 코드를 { } 안 가장 마지막 줄에 추가 (위에 줄에 , 잊지 말기)

컴파일된 css파일을 sass파일과 같은 폴더에 위치시키고 싶을때: savePath는 null 값

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

 

컴파일된 css파일을 루트폴더에 위치시키고 싶을때: savePath는 "/"

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

 

컴파일된 css파일을 루트폴더에 위치시키고 싶을때: savePath는 "/css"

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

 

컴파일된 css파일을 scss파일에 상대적으로 위치시키고 싶을때는 ~ 기호를 사용한다

컴파일된 css파일을 scss파일이 있는 폴더 안에 있는 css 폴더에 위치시키고 싶을때: savePath는 "~/css" 

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

 

컴파일된 css파일을 scss파일이 있는 폴더 밖에 있는 css 폴더에 위치시키고 싶을때: savePath는 "~/../css" 

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

 

4. settings.json에 코드 업데이트 한 후 Watch Sass 껐다가 다시 켜기 (Watching 클릭 후 Watch Sass 다시 클릭하기)

 

5. 모든 css파일이 css 폴더로 옮겨짐