KINAVisual Studio Community의 여러 확장 프로그램 중, 필수에 속하는 확장프로그램 중 하나가 SASS파일을 저장 시 자동으로 css파일로 컴파일 해 주는 “Web Compiler” 확장 프로그램입니다.
Web Compiler 확장프로그램은 위의 링크에서 다운로드 받으실 수 있습니다.
그런데 Web Compiler사용 시, 컴파일 에러가나는 경우가 있는데 이는 주로 scss의 문법이 에러가 났을 경우입니다. 예를 들면 닫는 }태그가 빠졌다던지 하는 경우말이죠.
하지만 모든 문법이 정상적인데도 불구하고 에러가 나는 경우가 간혹 있는데, Visual Studio의 오류메세지창을 자세히 살펴보면 Encording, UTF-8과 같은 메세지가 보일 경우가 있습니다. 이런 에러는 scss파일 내부 코드에 한글이 존재하는데 scss파일을 생성/저장할 때 UTF-8형식으로 저장되지 않았기 때문입니다. 따라서 해당 에러는 에러가나는 파일을 UTF-8형식의 인코딩으로 재 저장 해주시면 해결 됩니다.
1. SCSS파일을 다른이름으로 저장
먼저 에러가 발생하는 SCSS파일을 비주얼 스튜디오의 파일 -> 다른 이름으로 파일 저장 을 선택하여 다른이름으로 저장하는 창을 엽니다.
2. 저장 전 인코딩하여 저장하기 선택
이때, 파일을 그냥 저장하시면 안됩니다. 저장 버튼 옆의 아래화살표 모양의 아이콘을 클릭하시면 아래의 그림과 같이 인코딩하여 저장 이라는 옵션을 선택하실 수 있습니다.
3. UTF-8 형식으로 인코딩하여 저장 후 정상작동 확인
인코딩하여 저장옵션을 클릭하면, 파일이 이미 있다는 경고창이 뜹니다. 당연히 바꾸겠다는 Yes버튼을 클릭합니다.
Yes 버튼을 클릭하면 위의 사진과 같이 고급저장옵션 창이 오픈되며 인코딩을 선택할 수 있습니다. 현재는 KR949로 인코딩 되어 있는 것을 확인할 수 있습니다. 이제 이 인코딩을 유니코드 UTF-8로 변경해서 선택한 후 확인을 누르면 SCSS파일이 인코딩 되어 저장이 되며, 다시 컴파일을 시도하면 정상적으로 CSS파일이 컴파일 되는 것을 확인 하실 수 있습니다.
