Sass - @import rules are deprecated

@import rules are deprecated and will be removed in dart sass 3.0.0

• 최신 Sass에서는 @import 규칙이 더 이상 권장되지 않으며(deprecated), 대신 @use와 @forward를 사용하도록 권장되고 있습니다.

 

@import는 왜 deprecated 되었나?

• @import로 불러온 모든 변수, 믹스인, 함수 등이 전역(Global)에 섞여 이름 충돌 가능성이 높아집니다.
• 같은 파일이 여러 번 @import되면 Sass는 모든 내용을 중복 포함되는 문제가 발생합니다.
• 어떤 모듈이 무엇을 제공하는지 명확하지 않아 유지보수와 모듈 관리에 어려움이 있습니다.
• Sass 팀은 이 문제들을 해결하기 위해 모듈 시스템(@use, @forward)을 도입했고, @import는 deprecated(비권장) 처리되었습니다.

 

@use

• 외부 Sass 파일(모듈)을 불러와서 사용하는 역할
• 변수, 믹스인, 함수가 네임스페이스를 통해 접근함으로써, 이름 충돌 가능성을 낮춥니다.
• 같은 파일에 여러 번 @use해도 Sass는 한 번만 컴파일합니다.

 

@forward

• 다른 파일에 정의된 변수, 믹스인, 함수 등을 외부로 재노출하며 외부에 전달하는 역할
• 라이브러리 또는 유틸 파일의 진입점(index 파일)으로 사용됩니다.

 

반응형

예시

// index.scss
// @forward로 재노출한 모듈들을 index.scss에 정리
@forward "base/colors";
@forward "base/typography";
@forward "utils/mixins";
@forward "components/buttons";





// main.scss
// 실제 사용 파일(main.scss)에서는 하나의 파일만 @use하면 됩니다.
@use "index";

.page-title {
  color: index.$primary-color;
  font-family: index.$font-stack;
}

 

@import -> @use, @forward

1. 기존에 @import된 파일 구조와 순서 파악하여 기능별로 모듈을 나누고 이름을 명확히 합니다.
2. @forward 도입하여 기능 묶음별로 진입점(index 파일) 생성합니다.
3. 모든 기존 @import를 @use로 교체합니다.
4. 변수, 믹스인 등에 모듈 이름 붙입니다.

// 기존
// main.scss
@import 'variables';
@import 'mixins';
@import 'base/reset';
@import 'base/typography';
@import 'components/button';
@import 'pages/home';

// 변경 후
// index.scss
@forward "variables";
@forward "mixins";
@forward "reset";
@forward "typography";
@forward "button";
@forward "card";

// main.scss

@use 'utils' as *; // 네임스페이스 생략 가능하지만 권장 X
@use 'base';
@use 'components';

.button {
  background-color: utils.$primary-color;
  @include utils.flex-center;
}