Vue.js - TypeError : this.getOptions is not a function

/* 적용할 CSS 규칙을 선언한다. */
<style scoped lang="scss">
.container {
  background-color: var(--white);
}
.login-input {
  display: flex;
  flex-direction: column;
  /* scss 문법을 적용해 하위 input 태그에 바로 접근할 수 있다. */
  input {
    width: 300px;
  }
}
</style>

vue.js는 컴포넌트 파일에 스타일을 함께 작성하곤 하는데, SCSS 문법을 지원해 nested CSS를 쉽게 작성할 수 있다.

다만 SCSS를 적용하는 동안 발생할 수 있는 이슈가 두 가지 있다.

1. "sass" is not defined

첫 번째는 sass 모듈이 인식되지 않을 때다.

CRA로 리액트는 node-sass나 sass 모듈을 설치해주기만 하면 사전에 설정된 sass-loader에 의해 sass로 CSS 전처리가 가능하지만, 뷰는 sass와 함께 sass-loader를 함께 설치해줘야 한다.

yarn add sass sass-loader​

2. TypeError : this.getOptions is not a function

두 번째로 맞닥뜨리는 고비가 바로 이 이슈다.

인터넷에 검색해보니 이는 뷰 2. 대 버전과 sass-loader@11 > 버전이 호환되지 않아 출력되는 이슈라곤 하는데, 나의 경우에는 뷰 3.0으로 프로젝트를 세팅했음에도 동일한 오류가 발생했다.

 

아마 뷰의 버전보다는 최신 버전의 sass-loader에 뭔가 문제가 있는 듯 하다.

sass-loader를 다운그레이드 해주자!

지극히 개인적인 투정이지만... 뷰 2.대와 3.대 사이의 간극이 생각보다 크게 느껴진다.

 

공식 문서에서는 "2.0 => 3.0으로 쉽게 마이그레이션할 수 있다~" 라고 소개하지만 vuetify와 같은 메이저 플러그인도 아직 뷰 3.0을 완전히 대응하지는 못하는 듯 하고, 다른 플러그인 문서들도 뷰 2와 3 사이에서 뭔가 약간 어수선한 느낌이다.

 

보다 견고한 라이브러리를 위한 성장통이길 바래야겠다. 😂