[Vue.js/에러일지] SassError: Undefined variable

 

 

오늘도 외쳐보는

"왜 찾지를 못하니.......!!!!!!!"

 

 

에러

Failed to compile.

./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./src/styles/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
157 │       background-color: $navy-light;
    │                         ^^^^^^^^^^^
    ╵
  src/styles/page/test/_test.scss 157:25  @import
  src/styles/page/test/_index.scss 1:9    @import
  src/styles/page/index.scss 1:9          @import
  src/styles/index.scss 2:9               root stylesheet

 

 

원인

 

내가 예측한 원인은 2가지이다.

1. node-sass를 설치하지 않아서 그런가? => 설치해도 소용이 없다.

2. 선언하는 순서때문에 그런가? => 이리저리 순서를 바꿔보았지만 소용이 없다.

 

하지만 모두 아니었다.

그리고 오늘도 역시나 내 탓이었다.

 

page 밑에 common, test

나는 디렉토리를 이렇게 구성한 상태이다.

 

문제는 가장 최상단의 index.scss에서 @import 할 때 page 폴더까지만 적어주고 그 아래의 폴더인 common, test를 적지않았다.

아래처럼 폴더이름까지 적어주니 너~무 잘 찾는다.

 

📄 index.scss

// index.scss

// 이렇게만 해주면 안되고
@import 'page';

// 이렇게 하위 디렉토리를 명시해주니 변수를 잘 찾는다.
@import 'page/common';
@import "page/test";

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.