scss/@use 오류

❓ main.scss에서 정의한 색상을 footer.scss에서 사용하려고 임포트할때, scss에서 사용을 권장하는 @use를 사용하려고 하였으나 오류가 발생.

1️⃣임포트 자체의 문제인지 확인하기 위하여 @import를 사용하였더니 잘 색상이 반영되는 것을 확인할 수 있었다.

위와 같이 푸터 색상이 잘 반영되는 것을 확인할 수 있다.

2️⃣ 시도

2️⃣-1️⃣ sass에서 @use 는 dark-sass에서만 지원한다고 하여 설치되어 있는 node-sass를 삭제하고 dart-sass를 설치

npm remove node-sass
npm install sass
node_modules 파일 삭제
npm insall

2️⃣-2️⃣ @use 로 임포트한 파일에 대해서 별칭을 통한 접근 - 별칭을 mian으로

🔴 $color-5에 대한 오류 메세지

2️⃣-3️⃣ @use 로 임포트한 파일에 대해서 별칭을 통한 접근 - 별칭을 *으로

위의 방법들이 모두 안되어서 계속 서칭을 하던 중에 한 블로그 글을 읽게 되었고 별칭을 *으로 변경하였다.

참고
1. 블로글 글은 하단에 정리해두었습니다.
2. main.scss→varicables.scss로 파일명을 변경하였습니다.

3️⃣ 전역 설정

이후 전역에서 개별 임포트 없이 사용할 수 있도록 설정해주었다.

//vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "/src/assets/styles/variables.scss" as *;`, 
      }
    }
  }
})

🔍 왜 별칭을 ‘*’으로 변경하였더니 mixin을 찾을 수 있었을까 ?

• 우선 별칭(=네임스페이스)없이 접근하였을때, 오류가 났던 이유는 variables.scss 파일 내에서 정의된 믹스인, 변수 등이 네임스페이스를 통해 접근해야 하기 때문이다. 예를 들어, variables.scss 파일에서 믹스인 background-color와 변수 $color-5가 정의되어 있다고 가정했을 때, @use로 그 파일을 불러오면 그 파일의 내용이 기본적으로 variables라는 네임스페이스 하에 로드된다. 따라서 background-color($color-5) 믹스인을 사용할 때는 variables.background-color($color-5)처럼 네임스페이스를 지정해야 한다.
  
• ‘*’ 의 역할은 네임스페이스를 제거하고, variables.scss에 정의된 모든 변수, 믹스인, 함수 등을 전역으로 사용하게 해주는 역할을 한다.
• 따라서 as *를 사용하면 variables.scss에서 정의된 변수나 믹스인 등을 variables. 없이 직접 사용할 수 있었던 것이다.

🗂️ 참고 자료

https://velog.io/@bellecode20/%EC%9D%B4%EC%A0%9C-import-%EB%8C%80%EC%8B%A0-use%EB%A5%BC-%EC%93%B0%EC%9E%90-5mwoxcyv

https://always-hyeppy.tistory.com/entry/Vue3-Vite-sass-Undefined-variable-sass-use-rules-must-be-written-before-any-other-rules-에러-해결