SCSS @use 및 @forward 사용법 정리 📚✨

📌 SCSS에서 @use와 @forward 기본 개념

SCSS에서 @use와 @forward는 모듈화를 지원하는 기능으로, 파일 간 스타일과 변수, 믹스인을 안전하게 공유하고 관리할 수 있게 해준다.

• @use: 다른 SCSS 파일을 불러오기 위해 사용한다. 기본적으로 네임스페이스를 추가하여 가져온 파일의 변수를 사용할 때 네임스페이스를 통해 접근해야 한다.
• @forward: 여러 SCSS 파일을 전역적으로 불러오고, 이를 다른 파일에서 네임스페이스 없이 사용할 수 있게 한다. @use와 달리, 다른 SCSS 파일들이 @forward된 파일을 직접 사용할 수 있게 만든다.

⚡ 문제 해결: Undefined Variable 오류 해결 방법

"변수를 찾을 수 없다"는 오류는 변수나 믹스인에 접근할 때 네임스페이스를 제대로 사용하지 않아서 발생하는 문제다. 특히 **@use**를 사용할 때는, 가져온 파일의 변수나 믹스인에 접근하려면 네임스페이스를 사용해야 하기 때문이다.

🛠 문제 해결 방법

1. @use와 @forward의 조합으로 해결하기

• @use는 기본적으로 네임스페이스를 추가하여 파일을 가져오므로, 페이지 파일에서 변수를 사용할 때 해당 네임스페이스를 통해 변수에 접근해야 한다.
• 그러나 **@forward**를 사용하면 여러 파일을 전역적으로 가져와서, 페이지 SCSS 파일에서 변수를 네임스페이스 없이 사용할 수 있다.

📝 @forward 사용법

1. main.scss에서 @forward로 변수 파일을 전역으로 전달하기

main.scss에서 모든 필요한 스타일 파일들을 **@forward**로 불러오면, 페이지 SCSS 파일에서 변수를 네임스페이스 없이 사용할 수 있게 된다.

// main.scss

@forward 'constants/_colors';  // colors 변수를 전역적으로 전달
@forward 'base/_global';
@forward 'base/_normalizer';
@forward 'base/_reset';
@forward 'constants/_typography';
@forward 'layouts/_grid';
@forward 'mixins/_felx-box';
@forward 'mixins/_responsive';

 

 

2.페이지 SCSS 파일에서 @use로 main.scss만 불러오기

이제 페이지 SCSS 파일에서는 @use '../main'만 불러오면 된다. main.scss에서 **@forward**된 파일들을 전역적으로 사용할 수 있게 되므로, 페이지에서 변수를 네임스페이스 없이 사용할 수 있다.

// pages/page_1.scss

@use '../main' as *;  // main.scss만 불러오기

.some-class {
  border: 1px solid $Neutral150;  // 네임스페이스 없이 변수 사용 가능
}

 

💡 정리: @use와 @forward의 차이점 및 사용 방법

1. @use:
   • SCSS 파일을 가져올 때 네임스페이스가 자동으로 부여된다.
   • 다른 파일에서 변수를 사용할 때는 네임스페이스를 통해 접근해야 한다.
2. @forward:
   • SCSS 파일을 다른 파일에서 전역적으로 사용할 수 있게 한다.
   • 페이지 SCSS 파일에서 네임스페이스 없이 변수나 믹스인에 접근할 수 있게 된다.
   • @use와 함께 사용하여 필요한 파일을 한 번만 가져오고, 변수를 전역적으로 사용할 수 있게 할 수 있다.

📝 최종 구조 예시

// main.scss
@forward 'constants/_colors';  // 변수 파일을 전역적으로 전달
@forward 'base/_global';
@forward 'base/_normalizer';
@forward 'base/_reset';
@forward 'constants/_typography';
@forward 'layouts/_grid';
@forward 'mixins/_felx-box';
@forward 'mixins/_responsive';

// pages/page_1.scss
@use '../main' as *;  // main.scss만 불러오기

.some-class {
  border: 1px solid $Neutral150;  // 네임스페이스 없이 변수 사용 가능
}