개발/CSS

[Sass] Sass @import의 이해와 @use 마이그레이션

맛있는취나물 2024. 11. 29. 15:14

@import는 Sass의 오래된 가져오기 방식으로, Dart Sass 3.0.0부터 완전히 제거될 예정이다. 대신 @use 규칙을 사용하는 것이 권장된다.


Sass @import 마이그레이션 경고

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

@import의 주요 문제점

전역 범위 문제

  • 모든 변수, 믹스인, 함수가 전역적으로 접근 가능
  • 라이브러리들은 이름 충돌 방지를 위해 접두사 필요
  • @extend 규칙의 전역성으로 예측이 어려움

성능 및 구조적 문제

  • 매 @import마다 스타일시트 실행 및 CSS 출력
  • 컴파일 시간 증가와 출력 비대화
  • 비공개 멤버나 플레이스홀더 선택자 정의 불가

 

마이그레이션 도구 사용법

설치

npm install -g sass-migrator

 

사용

sass-migrator <migration> <entrypoint.scss...>

 

주요 마이그레이션 옵션

-migrate-deps

  • 의존성 있는 모든 스타일시트도 함께 변환
  • @use나 @forward로 연결된 파일은 제외

-load-path

  • 스타일시트 검색 경로 지정
  • 서드파티 라이브러리 경로 설정에 활용

-dry-run

  • 실제 변경 없이 미리보기 제공
  • -verbose와 함께 사용시 상세 변경사항 확인 가능

-verbose

  • 마이그레이션 과정의 상세 정보 제공
  • 파일 변경 내용 확인 가능

 

마이그레이션 예시

// 변환 전
$body-bg: #000;
$body-color: #111;
@import "bootstrap";

// 변환 후
@use "bootstrap" with (
  $body-bg: #000,
  $body-color: #111
);

 

참고

https://sass-lang.com/documentation/at-rules/import/

https://sass-lang.com/blog/import-is-deprecated/

https://sass-lang.com/documentation/cli/migrator/#installation

 

 

 

추가

CSS @import

  • 브라우저가 직접 처리하는 CSS 네이티브 기능
  • Sass 마이그레이터의 변환 대상이 아님