[Vue3] [plugin:vite:css] [sass] Undefined variable.

언젠가는 publishing도 공부를 해보겠다고 다짐하고 드디어! css 작업을 해보고자 새로 프로젝트를 생성해서 작업을 해보려는 찰나, 시작과 동시에 이런 저런 error를 마주했다. 우선은 이 에러들을 헤쳐나가는 과정을 차근차근 풀어보고자 한다.

프로젝트 스펙: vue3 / typescript / vite / scss

프로젝트는 우선 vue-cli의 npm init vue@latest 명령을 통해 구축했다. 뭐가 뭔지는 모르겠지만 이것저것 대충 입맛대로 설정해줬다.

이런 저런 기본 설정들을 마친 후 호기롭게 scss 파일을 생성했다. color 변수들을 모아놓은 variables.scss 파일.

여기저기 보니 main.ts(js) 파일에 import를 시켜주면 사용할 수 있다고 하여 import 처리를 하니 

Failed to resolve loader: sass-loader error가 뜬다.

울지 않고 loader를 설치해줬다 

yarn add sass-loader@latest

버전은 모르니까 최신버전으로 설치해주자. 

설치는 했는데 계속 오류가 난다. 어디서는 loader를 config.json에 등록을 해줘야 한다든지 같은 얘기를 해서 이런저런 시도를 해봤는데 결과적으로 config에 별도로 등록해주지는 않았다. 애초에 오류가 달랐다.

울지 말자

분명히 variables.scss에 등록한 변수인데, vue component file에서 사용하자니 찾을 수 없다고 한다. main.ts에 등록도 해줬는데..!!

다시 열심히 구글링을 한다. vite.config 파일에 css로 등록을 해줘야 한다고 한다. 

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import './src/assets/variables.scss';`
    }
  }
}

이렇게 넣어준다. perprocessorOptions에 대한 설명은 공식 문서 참조

https://ko.vitejs.dev/config/shared-options.html#css-preprocessoroptions

Vite

additionalData Option은 sass-loader에서 전역적으로 파일을 import 해서 사용할 수 있도록 하는 듯 하다. 기존 Option명은 perpandData 였으나, sass-loader 버전이 올라감에 따라 9버전 이후부터는 additionalData 를 사용한다고 한다.

이제 해결이 됐겠지? 하고 보는데 안된다. 뭔가 이상하다.

뭔가 잘못된 게 분명하다

import를 하고 있긴 한데 뒷 부분을 보면 이미 import가 된 것 처럼 보인다. 에러에서도 이미 loaded라고 한다. import 구분을 바꾸고, scss를 떼보고 별 쓸데 없는짓을 하다가 잠시 진정하고 생각했다.

>>이미 loaded 상태<<에 초점을 맞추고 생각해보니, 나는 이미 main.ts파일에서 import를 해놨었다는게 떠올라 호닥닥 주석처리 해봤다. 잘 나온다!

결론

project에서 sass / scss 를 사용하고 싶다면 sass-loader를 설치하자.

vite든 webpack이든 nuxt 든 next든 별도의 builder를 사용한다면 (사실 같은 것들인지는 모르겠습니다) config 파일에 css를 별도로 등록해주자.

main 파일에 import한다 해도 전역적으로 등록은 되는 듯 하나, 왜 안되는지 정확한 원리는 모르겠다. 다만, 중복 import는 하지 말도록 하자.

 

오늘도 일단 싸질러놓고 나중에 수습하자는 마음으로 대충 일단 글부터 썼는데, 나중에 정리를 하든 해야겠다.

개발 n년차인데 매일 기본기가 부족하다는 말을 입에 달고 사는게 자랑은 아니지만 어쩜 이렇게 근본없는 코딩을 하는지 나도 놀랍다!