react-miniter에 sass / scss 적용하려고 node-sass를 설치했다.
그리곤 VScode에서 @mixin @includes 문법을 사용하고는 로컬 라이브 서버로
제대로 적용이 되었는지 확인했다.
내 기대와는 다르게 에러가 발생했고 개발자 도구 콘솔에서 확인해보니
No mixin named (mixin이름) 이라고 뜸과 동시에
윗쪽에는 Uncaught Error: 로 에러 발생을 알려주고 있었다.
여기서가 삽질의 시작이었다..
해결하고 나서 보니 에러는 mixin의 이름을 찾을 수 없다 였는데…
윗쪽의 Uncaugth Error로 구글링해서 해결하고 있었다.
구글링하면 나오는 것들은 webpack, babel, sass-loader, css-loader 등등… 그리하여 이것들을 참고하면 해결이 되겠다는 생각을 가지고 package.json에서 수정해보기도 하고 터미널에서 install도 해보고 node, node_modules도 지워보고 다시 설치해보고 반복했다.
적용해보고 안되면 또 다르게 검색해서 또 적용해보고 또 안되면 적용 안해본것들을 적용해보고의 무한 반복이었다.
이렇게 24시간 이상이라는 시간을 쓰고… 예리님께 질문을 했는데 No mixin named (mixin이름) 에러를 보시고는 scss
문법을 잘못 쓴거 같다라고 말해주셔서 바로 해당 scss파일을 확인했다.
A라는 scss 파일에서 @mixin을 정의했고, B라는 scss 파일에서 @includes로 mixin을 사용하는 것인데
B라는 scss 파일에서 A라는 scss 파일에 존재하고 있는 mixin을 못찾는거 같아 B라는 scss 파일에 존재하고있는 includes를 A라는 scss
파일에 적용해봤다.
그러고 로컬 라이브 서버로 확인을 해봤는데 에러가 발생하지 않는다!!!!!!!!!!!!!(후…)
그리고 다시 원상복구 그리고 확인 … 에러 발생!!!!
이제 정확한 원인을 찾았다.
바로 B라는 scss 파일에서 A라는 scss 파일을 참조? 접근? 할 수 있게 @import시켜주었다.
그리고 @import 하기 전에 에러나던 상황에서의 코드 그대로를 가지고 로컬 라이브 서버로 확인을 해보니 드디어 에러가 발생하지 않았다.(ㅠ-ㅠ)
이 삽질을 통해 얻은 것은 에러부터 잘 파악하자!! 이다.
이후 해결과정에서도 해결이 안되면 새로운 환경을 만들어서 적용해보자!! 이다.
그리고 에러 내용이 무엇을 찾을 수 없다던가, 접근을 할 수 없다던가, 이런 종류라면 경로, import시켜주는거 또는
디렉토리 구조, 디렉토리, 파일 존재 여부 를 확인해보자!!