[React] @import를 @use로 바꾸면서 생기는 문제들

@import 를 사용하니 warning이 뜨면서 @use 사용을 권장해서 @use로 바꿔줬다.

@use와 @import 기능이 약간 다르다.

 

@use는 "캡슐화된 모듈"이다.

모듈마다 스코프가 분리되기때문에 한 파일의 내부에서 다른 파일 @use를 한다고해서 그 변수들이 외부로 자동 공개되지 않는다.

 

외부에 노출하고 싶으면 @forward를 사용해야한다.

예를 들어 main.scss 파일에서

color.scss파일과 font.scss 파일을 @use해서 사용하고 있는데

외부 index.scss 파일에서 main.scss를 @use한다고해서 color와 font 파일이 함께 노출되지않는다.

index.scss 파일에 color와 font 파일을 따로 @use 해주던가 아니면 

main.scss파일에서 color와 font 파일을 @use가 아닌 @forward 를 사용하면 해결된다.

 

기존 @import는 한파일에서 여러번 불러오면서 중복 정의되는 위험이 있었고 전역 스코프 오염이 심해

프로젝트 규모가 커지면 유지보수가 어려웠기때문에

Sass는 @use와 @forward를 도입하고 @import를 제외시켰다.

 

@use = 이 모듈 안에서만 사용하겠다.

@forward = 이 모듈을 외부에 공개하겠다.

 

 

 

+)

vite.config.ts 에서 SCSS 전역 사용 선언한 부분을 use로 바꾸는 경우 참고.

//SCSS 전역 사용 선언.
//기존 코드
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/styles/main.scss" as *;`,
      },
    },
  }
  
//@use로 바꾼 버전(에러 발생)
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/assets/styles/main.scss" as *;`,
      },
    },
  }
  
//@use로 바뀌면서 대상 파일을 정확하게 찾고 분석해야 해서, Vite의 alias를 사용해야함.
//작동되게 수정한 버전
resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/styles/main.scss" as *;`,
      },
    },
  }