생계유지형 개발자/Stack Over Flow 한국판

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

이 가을 2024. 11. 12. 12:12

 

# 오류

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import 
│ @import "icons/dripicons"; │ ^^^^^^^^^^^^^^^^^ ╵ src/assets/scss/custom/plugins/_icons.scss 8:9 @import
src/assets/scss/icons.scss 11:9 root stylesheet

 

# 원인

원래 Sass는 @import 규칙을 사용하여 다른 파일을 하나의 글로벌 네임스페이스로 로드했으며, 모든 내장 기능도 전 세계적으로 사용할 수 있었습니다. 모듈 시스템(@use 및 @forward rules)을 몇 년 동안 사용할 수 있었기 때문에 Sass @import 규칙과 글로벌 내장 기능을 모두 비활성화하고 있습니다. (번역)

 

# 해결

@import -> @use 변환을 위해 Sass에서는 sass-migrator 라는 npm 기능을 제공한다.

# sass-migrator 설치
npm install -g sass-migrator

# sass-migrator 실행 
sass-migrator module --migrate-deps src/assets/scss/icons.scss

 

※ 참고

 

https://sass-lang.com/documentation/breaking-changes/import/

 

Sass: Breaking Change: `@import` and global built-in functions

Originally, Sass used @import rules to load other files with a single global namespace, with all built-in functions also available globally. We’re deprecating both Sass @import rules and global built-in functions now that the module system (@use and @for

sass-lang.com