SCSS @import 사용시 에러

Udemy 강의가 업데이트 되지 않는 바람에 시간을 꽤 쏟았다

@import 구문 대신에 변수를 담고 있는 scss 파일의 경우는 @use 를 사용하여 불러온다.

 

@use "abstracts/_variables" as variables;

 

Compilation Error
Error: Invalid UTF-8.

 

이게 뭐지...........

한참을 봤다

@use "abstracts/_variables" as variables;
@import "abstracts/_functions";
@import "abstracts/_mixins";

 

이렇게 세 구문을 썼는데 

두 번째 문장은 문제 없고, 세 번째 문장에서만 계속 FAIL 떠서 한창을 찾다가 발견한 아주 간단한 방법...

그 해당 파일의 인코딩 문제였다. 

VS CODE의 인코딩만 체크해서... 

 

@use "abstracts/variables" as variables;
//as variables 작성 안 할 시 기본 default 값으로 
//변수variables(파일이름)과 동일하게 사용 가능

@import "abstracts/functions";
@import "abstracts/mixins";
@import "base/base";
@import "base/animations";
@import "base/typography";
@import "base/utilities";

@import "pages/home";
@import "components/button";