본문 바로가기

HTML & CSS

[SCSS] css가 다른 폴더로 컴파일 되는 것에 대한 오류해결(savePath)

live sass compiler 라이브러리를 통해 VSCode오른쪽 아래 Watching... 버튼을 누르면 SCSS 파일이 CSS로 컴파일되어 생긴다. 

그런데 SCSS를 작성중인 해당 폴더에 생기지 않고 계속해서 작성 폴더의 상위 폴더로 CSS파일이 생겼다.😢

이를 해결하고자 검색중 세팅파일에서 savePath를 변경하면 된다는 글을 발견하여, 시도했지만 계속 오류가 났다.

 

처음 시도했던 방법

 

Sass에 대해서 알아보자!(p.s. 셋팅/컴파일/포맷/경로설정)

Sass 슬슬 파헤쳐볼까 (feat. map파일)

velog.io

 

1. ctrl + , 단축키를 눌러 VSCode의 설정으로 가준다.

 

2. 설정 검색란에 json이라고 치고 settings.json에서 편집으로 들어가 준다.

 

3.여기서 아래와 같이 세팅이 되어있었으며 savePath를 null이었던걸 변경해줬는데 안됨

(참고로 liveSassCompile.settings.generateMap": false 는 .map파일을 추가로 생성할 것이냐는 건데 이 파일은 잘 안 쓰기 때문에 보통 false로 지정한다.)

 

4. 다시 시도했으나 여전히 상위폴더에서 CSS가 생성됨 .. 

아까는 사용자에서 지정했어서, 작업 영역 탭을 눌러 해당 setting.json파일을 열었다.

아래와 같이 savePath를 똑같이 지정해주자 적용되었다. 😆✨

 

+savePath 작성 참고

~/ 는 현재 작성중인 폴더

~/../css 는 scss가 저장되는 곳에서 상위폴더로 올라가서 [css]폴더에 저장하겠다는 의미