개발/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 마이그레이터의 변환 대상이 아님