SASS 세팅을 하는데 우여곡절이 많았는데... 간단하게 복습 차원에서 정리해보겠다...
우선 나는 NUXT 라는 것을 이용해서 파일을 만들었다.

npm create-nuxt-app

npm create-nuxt-app '만들 앱 이름'

node_modules 및 package.json이 자동으로 생성되었다!

하지만 node version이 14버전으로 구버전이었다.
이는 23년 4월 30일 이후로 지원되지 않기에 16버전으로 바꾸는 작업을 했다.

nvm 사용하여 node version 맞추기

node -v 				// 내가 사용하고 있는 Node 버전 확인하기
nvm list available 		// 사용 가능한 버전 조회하기
nvm install 16 	        // 16버전 다운로드하기
nvm list				// 설치 되어있는 버전확인하기
nvm use 16			    // 16버전 사용하기

이것은 nvm이 깔려 있어야만 가능하다!
맥 OS에서 nvm 설치하는데도 애를 먹었었는데, 이건 추후에 정리하겠다.

sass, sass-loader install

npm install --save-dev sass sass-loader@10

--save-dev 는 build 시 관여되지 않도록 dev 모드에서만 적용되는 명령어다!

sass 는 과거의 node-sass, 현재 dart-sass 이다.
dart도 조만간 지원되지 않는다는 말도 있다!
하지만 그냥 sass로 install 하면 되기 때문에 신경쓰지 않아도 될 것 같다.

sass-loader 는 sass를 실행시키기 위해서 필수적으로 있어야하는 요소다.
하지만 sass와의 호환성 문제 때문에 version을 맞춰야한다.
나는 10버전으로 install 했더니 호환됐다!

package.json 의 devDependencies에 잘 추가됐다면, 완성!
만약 dependencies 에 추가되어 있다면, 옮겨주면 된다.

style-resources install

npm install --save-dev @nuxtjs/style-resources

@mixin 등을 import해오지 않고 @include 만으로 쓰려면 style-resources를 install 해야한다.

제대로 동작하는 모습을 확인했다!

style lang="scss"로 줘서 적용이 잘 되는지 확인해 보는 방법도 있다 ㅎㅎ