5. Sass -At-rules (@-규칙) @use, @forward, @import

Sass의 추가 기능의 대부분은 CSS 위에 추가되는 새로운 @-규칙의 형태로 제공된다.

• @use 는 다른 Sass 스타일시트의 믹스인, 함수 및 변수를 로드하고 여러 스타일시트의 CSS를 함께 결합합니다.
• @forward는 Sass 스타일시트를 로드하고 스타일시트가 @use 규칙과 함께 로드될 때 해당 믹스인, 함수 및 변수를 사용할 수 있도록 합니다.
• @import는 다른 스타일시트의 스타일, 믹스인, 함수 및 변수를 로드하도록 CSS @-규칙을 확장합니다.
• @mixin과 @include은 스타일의 덩어리를 쉽게 재사용할 수 있게 합니다.
• @function은 SassScript 표현식에서 사용할 수 있는 사용자 정의 함수를 정의합니다.
• @extend를 사용하면 선택자가 다른 스타일을 상속할 수 있습니다.
• @at-root는 CSS 문서의 루트에 스타일을 넣습니다.
• @error는 컴파일이 실패하고 오류 메시지가 표시되도록 합니다.
• @warn은 컴파일을 완전히 중지하지 않고 경고를 출력합니다.
• @debug는 디버깅 목적으로 메시지를 출력합니다.
• @if, @each, @for, @while 등의 흐름 제어 규칙은 스타일의 방출 여부와 횟수를 제어합니다.

Sass는 또한 Plain CSS 규칙에 대한 몇 가지 특별한 동작을 가지고 있습니다: 그것들은 보간을 포함할 수 있고 스타일 규칙에 중첩될 수 있습니다. @media와 @supports와 같은 일부는 SassScript를 보간 없이 규칙 자체에서 직접 사용할 수 있도록 허용합니다.

@use

@use 규칙은 다른 Sass 스타일시트의 믹스인, 함수 및 변수를 로드하고 여러 스타일시트의 CSS를 함께 결합합니다. @use에 의해 로드된 스타일시트를 "모듈"이라고 합니다. Sass는 또한 유용한 기능으로 가득 찬 내장 모듈을 제공합니다.

가장 간단한 @use 규칙은 지정된 URL에 모듈을 로드하는 @use "<url>입니다. 이런 방식으로 로드된 모든 스타일은 해당 스타일이 로드되는 횟수에 관계없이 컴파일된 CSS 출력에 정확히 한 번 포함됩니다.

❗️경고!
스타일시트의 @use 규칙은 스타일 규칙을 포함하여 @forward 이외의 규칙 앞에 와야 합니다. 그러나 모듈을 구성할 때 사용할 규칙 사용 전에 변수를 선언할 수 있습니다.

멤버 로딩

<네임스페이스>.<변수>, <네임스페이스>.<함수>() 또는 @include <네임스페이스>를 작성하여 다른 모듈의 변수, 함수 및 믹스인에 접근할 수 있습니다. 기본적으로 네임스페이스는 모듈 URL의 마지막 구성 요소입니다.

@use로 로드된 멤버(변수, 함수 및 믹스인)는 로드된 스타일시트에서만 볼 수 있습니다. 다른 스타일시트도 그것들에 액세스하려면 자체 @use 규칙을 작성해야 합니다. 이렇게 하면 각 멤버가 정확히 어디에서 왔는지 쉽게 파악할 수 있습니다. 여러 파일의 멤버를 한 번에 로드하려면 @forward 규칙을 사용하여 하나의 공유된 파일에서 모두 전달할 수 있습니다.

💡 재미있는 사실:
@use는 구성원 이름에 네임스페이스를 추가하기 때문에 스타일시트를 작성할 때 $radius 또는 $width와 같은 매우 간단한 이름을 선택하는 것이 안전합니다. 이것은 사용자가 다른 라이브러리와의 충돌을 피하기 위해 $mat-corner-radius와 같은 긴 이름을 쓰도록 장려했던 이전의 @import 규칙과는 다르며, 스타일시트를 명확하고 읽기 쉽게 유지하는 데 도움이 됩니다!

네임스페이스 선택

기본적으로 모듈의 네임스페이스는 파일 확장자가 없는 URL의 마지막 구성 요소일 뿐입니다. 그러나 때로는 다른 네임스페이스를 선택하고싶을 수도 있습니다.-자주 참조하는 모듈에 대해 더 짧은 이름을 사용하거나 동일한 파일 이름으로 여러 모듈을 로드할 수 있습니다. @"<url>" as <namespace>로 사용하여 이 작업을 수행할 수 있습니다.

@use "<url>" as *을 작성함으로써 네임스페이스가 없는 모듈을 로드할 수도 있습니다.
그러나 당신이 작성한 스타일시트에 대해서만 이 작업을 수행하는 것이 좋습니다. 그렇지 않으면 이름 충돌을 일으키는 새 멤버가 추가될 수 있습니다!

프라이빗 멤버

스타일시트 작성자는 정의한 모든 멤버들을 스타일시트 외부에서 사용을 못하게 할 수 있습니다. Sass는 프라이빗 멤버의 이름을 - 또는 _로 시작하여 프라이빗 멤버를 쉽게 정의할 수 있습니다. 이러한 멤버는 해당 멤버를 정의하는 스타일시트 내에서 정상적으로 작동하지만 모듈의 퍼블릭 API의 일부는 아닙니다. 즉, 모듈을 로드하는 스타일시트에서는 프라이빗 멤버를 볼 수 없습니다!

💡 재미있는 사실:
멤버를 단일 모듈이 아닌 전체 패키지에 프라이빗으로 설정하려면 패키지의 진입점(패키지를 사용하기 위해 로드하도록 사용자에게 지시하는 스타일시트)에서 해당 모듈을 전달하지 마십시오. 나머지 모듈을 전달하는 동안 해당 멤버를 숨길 수도 있습니다!

설정

스타일시트는 !default 플래그를 사용하여 변수를 설정(변경) 가능하게 할 수 있습니다. 모듈을 설정과 함께 로드하려면 @use <url> with (<변수>: <값>, <변수>: <값>)을 작성합니다. 설정된 값은 변수의 기본값(디폴트값)을 재정의합니다.

믹스인과 함께

@use ... with를 사용하여 모듈을 설정하는 것은 특히 @import 규칙과 함께 작동하도록 작성된 라이브러리를 사용할 때 매우 편리합니다. 그러나 특별히 유연하지는 않으며, 고급 사용 사례에는 권장하지 않습니다. 한 번에 여러 변수를 구성하거나, 맵을 설정으로 전달하거나, 모듈이 로드된 후 설정을 업데이트하려는 경우, 대신 변수를 설정하기 위해 믹스인을 작성하고 스타일을 주입하기 위해 다른 믹스인을 작성하는 것을 고려하세요.

변수 재할당

모듈을 로드한 후 모듈의 변수를 재할당할 수 있습니다.

sass문제인지 컴파일러 문제인지 재할당시 에러 발생함.
디버깅하면 값은 바뀌어 있는데 왜이럴까

네임스페이스가 없는 모듈을 as *로 사용하여 가져오는 경우에도 동일합니다. 해당 모듈에 정의된 변수 이름에 할당하면 해당 모듈의 값을 덮어씁니다.

❗️주의!
빌트인 모듈 변수(예: math.$pi)는 재할당될 수 없습니다.

모듈 찾기

로드하는 모든 스타일시트에 대한 절대 URL을 쓰는 것은 재미가 없을 것이므로 모듈을 찾기 위한 Sass의 알고리즘은 그것을 조금 더 쉽게 만듭니다. 먼저 로드할 파일의 확장자를 명시적으로 작성할 필요가 없습니다. @usse "variables"는 자동으로 variables.scss, variables.ass 또는 variables.css를 로드합니다.

❗️경고!
스타일시트가 모든 운영 체제에서 작동하도록 하기 위해 Sass는 파일 경로가 아닌 URL로 파일을 로드합니다. 따라서 Windows에서도 백슬래시가 아닌 정방향 슬래시를 사용해야 합니다.

로드 경로

모든 Sass 구현체들은 사용자들이 로드 경로를 제공할 수 있게 합니다: Sass가 모듈을 찾을 때 찾을 파일 시스템의 경로. 예를 들어 node_modules/susy/sass를 로드 경로로 전달하는 경우 @use "susy"를 사용하여 node_modules/susy/sass/sussy.scss를 로드할 수 있습니다.

그러나 모듈은 항상 현재 파일을 기준으로 먼저 로드됩니다. 로드 경로는 모듈의 URL과 일치하는 상대 파일이 없는 경우에만 사용됩니다. 이렇게 하면 새 라이브러리를 추가할 때 실수로 상대 불러오기를 망치지 않습니다.

💡 재미있는 사실:
일부 다른 언어와 달리 Sass는 상대적인 가져오기에 ./를 사용할 필요가 없습니다. 상대적인 가져오기는 항상 사용할 수 있습니다.

부분

규칙적으로, Sass 파일들은 자체적으로 컴파일되지 않고 모듈로만 로드되도록 되어 있으며 _code.scss처럼 _로 시작합니다. 이것들은 부분이라고 불리며, 그들은 Sass 도구들에게 그 파일들을 스스로 컴파일하려고 하지 말라고 말합니다. 부분을 불러올 때(import) _를 생략할 수 있습니다.

인덱스 파일

폴더에 _index.scss 또는 _index.sass를 작성하면 폴더 자체의 URL을 로드할 때 인덱스 파일이 자동으로 로드됩니다.

CSS 로드하기

그밖에 .sass 및 .scss 파일을 로드하는 것뿐만 아니라 Sass는 일반 이전 .css 파일을 로드할 수 있습니다.

모듈로 로드된 CSS 파일은 특별한 Sass 기능을 허용하지 않으므로 Sass 변수, 함수 또는 믹스인을 노출할 수 없습니다. 작성자들이 실수로 CSS에 Sass를 쓰지 않도록 하기 위해, 유효한 CSS가 아닌 모든 Sass 기능은 오류를 생성할 것입니다. 그렇지 않으면 CSS는 그대로 렌더링됩니다. 그것은 연장될 수도 있습니다!

@import와 다른 점

@use 규칙은 이전 @import 규칙을 대체하기 위한 것이지만 다르게 작동하도록 의도적으로 설계되었습니다. 이 둘 사이의 주요 차이점은 다음과 같습니다.

• @use는 변수, 함수 및 믹스인을 현재 파일의 범위 내에서만 사용할 수 있도록 합니다. 그것은 결코 그것들을 전역(global) 범위에 추가하지 않습니다. 이렇게 하면 Sass 파일에서 참조하는 각 이름이 어디에서 왔는지 쉽게 파악할 수 있으며 충돌 위험 없이 더 짧은 이름을 사용할 수 있습니다.

• @use은 각 파일을 한 번만 로드합니다. 이것은 당신이 실수로 의존성의 CSS를 여러 번 반복해서 복제하지 않도록 보장합니다.

• @use는 파일의 시작 부분에 나타나야 하며 스타일 규칙에 중첩될 수 없습니다.

• 각 @use 규칙은 하나의 URL만 가질 수 있습니다.

• @use는 들여쓰기 문법을 사용하는 경우에도 URL 주위에 따옴표를 사용해야 합니다.

@forward

@forward 규칙은 Sass 스타일시트를 로드하고 스타일시트가 @use 규칙으로 로드될 때 해당 믹스인, 함수 및 변수를 사용할 수 있도록 합니다. 많은 파일에 걸쳐 Sass 라이브러리를 구성하는 동시에 사용자가 단일 진입점 파일을 로드할 수 있도록 합니다.

규칙은 @forward "<url>"로 작성됩니다. @use와 마찬가지로 주어진 URL에 모듈을 로드하지만, 로드된 모듈의 전역 멤버들을 모듈에 직접 정의된 것처럼 모듈의 사용자가 사용할 수 있게 합니다. 이러한 멤버들은 모듈에서 사용할 수 없습니다. 하지만 원한다면 @use 규칙도 작성해야 합니다. 걱정하지 마세요. 모듈은 한 번만 로드됩니다!

동일한 파일의 동일한 모듈에 대해 @forward와 @use를 모두 작성하는 경우 항상 @forward를 먼저 작성하는 것이 좋습니다. 이렇게 하면 사용자가 전달된 모듈을 설정하려는 경우 @use가 아무런 설정 없이 모듈을 로드하기 전에 해당 설정이 @forward에 적용됩니다.

💡 재미있는 사실:
@forward 규칙은 모듈의 CSS에 관한 한 @use와 같이 동작한다. 전달된 모듈의 스타일은 컴파일된 CSS 결과물에 포함될 것이며, @forward가 있는 모듈은 @used가 아니더라도(사용되지 않더라도) 확장할 수 있다.

접두사 추가

모듈 구성원은 일반적으로 네임스페이스와 함께 사용되기 때문에, 짧은 이름과 간단한 이름이 일반적으로 가장 읽기 쉬운 옵션입니다. 그러나 이러한 이름은 해당 이름이 정의된 모듈 외부에서는 의미가 없을 수 있으므로 @forward는 전달하는 모든 구성원에 추가 접두사를 추가할 수 있습니다.

이것은 @forward "<url>" as <prefix>-*로 쓰고, 모듈에 의해 전달되는 모든 혼합, 함수, 변수 이름의 시작에 주어진 접두어를 추가합니다. 예를 들어, 모듈이 reset이라는 이름의 멤버를 정의하고 as list-*로 전달하는 경우 하류 스타일시트는 이를 list-reset이라고 참조합니다.

visibility 제어

모듈에서 모든 멤버를 전달하고 싶지 않은 경우가 있습니다. 패키지에서만 사용할 수 있도록 일부 멤버를 비공개로 유지하거나 사용자에게 일부 구성원을 다른 방법으로 로드하도록 요구할 수 있습니다. @forward "<url>" hide <members...> 또는 @forward "<url>" show <members...>를 작성하여 전달할 멤버를 정확하게 제어할 수 있습니다.

hide 형식은 나열된 구성원을 전달하지 않고 다른 모든 구성원을 전달해야 함을 의미합니다. show 형식은 명명된 구성원만 전달해야 함을 의미합니다. 두 가지 형식 모두 믹스인, 함수 또는 변수($ 포함)의 이름을 나열합니다.

모듈 설정

@forward 규칙은 설정이 포함된 모듈을 로드할 수도 있습니다. 이 기능은 @use와 동일하게 작동하며, 한 번만 추가하면 됩니다: @forward 규칙의 구성은 설정에서 !default 플래그를 사용할 수 있습니다. 이를 통해 모듈은 상류 스타일시트의 기본값을 변경하면서 하류 스타일시트를 재정의할 수 있습니다.

@import

Sass는 Sass와 CSS 스타일시트를 가져올 수 있는 기능으로 CSS의 @import 규칙을 확장하여 믹스인, 함수, 변수에 대한 액세스를 제공하고 여러 스타일시트의 CSS를 함께 결합합니다다. 브라우저가 페이지를 렌더링할 때 여러 HTTP 요청을 작성해야 하는 일반 CSS 가져오기와 달리 Sass 가져오기는 컴파일 중에 완전히 처리됩니다.

Sass 가져오기는 CSS 불러오기(import)와 동일한 문법을 갖지만, 여러 불러오기를 각각 고유한 @import를 가질 것을 요구하지 않고 쉼표로 구분할 수 있습니다. 또한 들여쓰기 문법에서는 가져온 URL에 따옴표가 필요하지 않습니다.

❗️경고!
Sass 팀은 @import 규칙의 지속적인 사용을 금지합니다. Sass는 앞으로 몇 년에 걸쳐 점진적으로 그것을 없애고, 결국에는 언어에서 완전히 제거할 것입니다. 대신 @use 규칙을 사용하세요. (현재 @use는 Dart Sass만 지원합니다. 다른 구현의 사용자는 @import 규칙을 대신 사용해야 합니다.)

@import에 무슨 문제가 있나요?
@import 규칙에는 여러 가지 심각한 문제가 있습니다.

• @import를 사용하면 모든 변수, 믹스인 및 함수에 전역으로 접근할 수 있습니다. 이것은 사람들(또는 도구)이 무엇이 어디에 정의되어 있는지 구별하기 어렵게 만듭니다.
• 모든 것이 전역이기 때문에 라이브러리는 이름 충돌을 피하기 위해 모든 구성원에게 접두사를 붙여야 합니다.
• @extend 규칙 또한 전역이기 때문에 어떤 스타일 규칙이 확장될지 예측하기가 어렵습니다.
• 각 스타일시트가 실행되고 @import될 때마다 CSS가 방출되므로 컴파일 시간이 증가하고 결과물이 비대해집니다.
• 다운스트림 스타일시트에 액세스할 수 없는 개인 구성원 또는 자리 표시자 선택기를 정의할 방법이 없었습니다.
  
  새로운 모듈 시스템과 @use 규칙은 이러한 모든 문제를 해결합니다.
  
  마이그레이션 방법
  대부분의 @import 기반 코드를 @use 기반 코드로 순식간에 자동 변환하는 마이그레이션 도구를 개발했습니다. 진입 지점을 가리키고 실행하면 됩니다!

Sass가 파일을 불러올 때 해당 파일은 @import 대신 해당 내용이 직접 표시된 것처럼 평가됩니다. 불러온 파일의 모든 믹스인, 함수 및 변수를 사용할 수 있으며 모든 CSS는 @import가 작성된 정확한 지점에 포함됩니다. 또한 @import 이전에 정의된 믹스인, 함수 또는 변수(다른 @import들에서 포함된)를 임포트된 스타일시트에서 사용할 수 있습니다.

❗️경고!
동일한 스타일시트를 두 번 이상 불러올 경우 매번 다시 평가됩니다. 함수와 믹스인만 정의한다면, 이것은 보통 큰 문제가 되지 않지만, 스타일 규칙이 포함되어 있다면 CSS에 한 번 이상 컴파일될 것입니다.

파일 찾기

불러오는 모든 스타일시트에 대한 절대 URL(절대경로)을 쓰는 것은 재미있지 않을 것이므로 불러올 파일을 찾는 Sass의 알고리즘은 그것을 조금 더 쉽게 만듭니다. @import "variables"는 자동으로 variables.scss, variables.sass 또는 variables.css를 로드합니다.

❗️경고!
스타일시트가 모든 운영 체제에서 작동하도록 하기 위해 Sass는 파일 경로가 아닌 URL로 파일을 가져옵니다. 따라서 Windows(윈도우)에 있는 경우에도 백슬래시가 아닌 정방향 슬래시를 사용해야 합니다.

로드 경로

모든 Sass 구현을 통해 사용자는 로드 경로를 제공할 수 있습니다. 예를 들어 node_modules/sussy/sass를 로드 경로로 전달하는 경우 @import "susy"를 사용하여 node_modules/susy/sass/sussy.scss를 로드할 수 있습니다.

그러나 불러오기는 항상 현재 파일을 기준으로 먼저 확인됩니다. 로드 경로는 불러오기와 일치하는 상대 파일이 없는 경우에만 사용됩니다. 이렇게 하면 새 라이브러리를 추가할 때 실수로 상대 불러오기를 망치지 않습니다.

💡 재미있는 사실:
일부 다른 언어와 달리 Sass는 상대 불러오기에 ./를 사용할 필요가 없습니다. 상대적인 불러오기는 항상 사용할 수 있습니다.

부분

관례적으로 자체적으로 컴파일되지 않고 불러오기(임포트)만 되는 Sass 파일은 로 시작합니다(_code.scss에서와 같이). 이를 부분(partials)이라고 하며 Sass 도구가 자체적으로 해당 파일을 컴파일하지 않도록 지시합니다. 부분을 불러올 때 를 생략할 수 있습니다.

인덱스 파일

폴더에 _index.scss 또는 _index.sass를 작성하면 폴더 자체를 가져올 때 해당 파일이 대신 로드됩니다.

사용자 정의 importer

모든 Sass 구현체는 @import들이 스타일시트를 찾는 방법을 제어하는 사용자 정의 임포터를 정의하는 방법을 제공한다.

• Node Sass와 Dart Sasson npm은 JS API의 일부로 importer 옵션을 제공합니다.
• Dart Sasson pub은 사용자 지정 임포터로 확장할 수 있는 추상 importer 클래스를 제공합니다.
• Ruby Sass는 Importers::Base class를 제공합니다. 사용자 지정 임포터에서 확장할 수 있는 기본 클래스입니다.

중첩

import는 일반적으로 스타일시트의 최상위 수준에서 작성되지만, 반드시 그럴 필요는 없습니다. 스타일 규칙 또는 일반 CSS 규칙 내에 중첩될 수도 있습니다. import된 CSS는 해당 컨텍스트에 중첩되어 있으므로 중첩된 import는 특정 요소 또는 미디어 쿼리에 대한 CSS 덩어리의 범위 지정에 유용합니다. 그러나 중첩된 import에 정의된 최상위 믹스인, 함수 및 변수는 여전히 전역적으로 정의됩니다.

💡 재미있는 사실:
중첩된 import는 서드파티 스타일시트의 범위를 지정하는 데 매우 유용하지만, 가져오려는 스타일시트의 작성자인 경우 스타일을 믹스인으로 작성하고 해당 믹스인을 중첩된 컨텍스트에 포함하는 것이 일반적으로 더 좋은 생각입니다. 믹스인은 좀 더 유연한 방법으로 사용할 수 있으며, import된 스타일시트를 보면 어떻게 사용할 것인지 더 명확합니다.

❗️경고!
중첩된 import의 CSS는 믹스인으로 평가되는데, 이는 부모 선택자가 중첩된 스타일 시트의 선택자를 참조한다는 것을 의미한다.

CSS 불러오기

.sass 및 .scss 파일을 import하는 것 외에도 Sass는 일반 오래된 .css 파일을 import할 수 있습니다. 유일한 규칙은 .css 확장자를 명시적으로 포함해서는 안 된다는 것입니다. 왜냐하면 .css 확장자는 일반 CSS @import를 나타내는 데 사용되기 때문입니다.

일반 CSS의 @imports

@import는 CSS에도 정의되어 있기 때문에 Sass는 컴파일 시 파일을 import하려고 하지 않고 일반 CSS @import를 컴파일할 방법이 필요하다. 이를 달성하기 위해 SCSS가 CSS의 상위 집합이 되도록 하기 위해 Sass는 다음과 같은 특성을 가진 모든 @import를 일반 CSS 가져오기로 컴파일한다.

• URL이 .css로 끝나는 위치를 import.
• URL이 http:// 또는 https:로 시작되는 위치를 import.
• URL이 url()로 기록된 위치를 import.
• 미디어 쿼리가 있는 것을 import.

import와 모듈

Sass의 모듈 시스템은 @use 규칙이 포함된 파일을 불러오든, 모듈로 불러오기가 포함된 파일을 로드하든 상관없이 @import와 완벽하게 통합됩니다. 우리는 @import에서 @use로의 전환을 가능한 한 원활하게 하고 싶습니다.

모듈 시스템 파일 불러오기

@use 규칙이 포함된 파일을 불러오면 불러오는 파일은 해당 파일에 직접 정의된 모든 멤버(개인 멤버 포함)에 액세스할 수 있지만 로드된 모듈의 멤버에는 액세스할 수 없습니다. 그러나 해당 파일에 @forward 규칙이 포함된 경우 가져오기 파일은 전달된 구성원에 대한 액세스 권한을 가집니다. 즉, 모듈 시스템에서 사용하도록 작성된 라이브러리를 불러올 수 있습니다.

❗️경고!
@use 규칙이 있는 파일이 불러와질 때, 다른 불러오기에 의해 이미 포함되어 있더라도, 그것들에 의해 과도적으로 로드된 모든 CSS는 결과 스타일시트에 포함됩니다. 조심하지 않으면 CSS 결과물이 비대해질 수 있습니다!

Import-Only 파일

@use에 적합한 API는 @import에 적합하지 않을 수 있습니다. 예를 들어, @use는 기본적으로 모든 구성원에 네임스페이스를 추가하여 단축 이름을 안전하게 사용할 수 있지만 @import는 그렇지 않기 때문에 더 긴 이름이 필요할 수 있습니다. 라이브러리 작성자라면 새 모듈 시스템을 사용하도록 라이브러리를 업데이트하면 기존의 @import 기반 사용자가 손상될 것을 우려할 수 있습니다.

이를 쉽게 하기 위해 Sass는 Import-Only 파일도 지원합니다. 파일 이름을 <name>.import.scss로 지정하면 @import용으로만 로드되고 @use용으로 로드되지 않습니다. 이렇게 하면 @import 사용자에 대한 호환성을 유지하면서 새 모듈 시스템의 사용자에게 좋은 API를 제공할 수 있습니다.

예제 ?

import를 통해 모듈 설정하기

모듈을 처음 로드하는 @import 앞에 글로벌 변수를 정의하여 @import를 통해 로드되는 모듈을 설정할 수 있습니다.

❗️경고!
모듈은 한 번만 로드되므로 처음 모듈을 @import한 후(심지어 간접적으로라도) 설정을 변경하면 @import한 모듈을 다시 로드해도 변경 내용이 무시됩니다.

import를 포함한 모듈 로드하기

@import를 사용하는 모듈을 @use(또는 @forward)를 사용하여 로드하면 로드하는 스타일시트에 의해 정의된 모든 퍼블릭 멤버와 스타일시트가 과도적으로 가져오는 모든 항목이 해당 모듈에 포함됩니다. 즉, 불러온 모든 것이 하나의 큰 스타일 시트에 쓰여진 것처럼 처리됩니다.

이렇게 하면 의존하는 모든 라이브러리가 새 모듈 시스템으로 변환되기 전에도 스타일시트에서 @use를 사용하여 시작을 쉽게 변환할 수 있습니다. 그러나 API를 변환하면 변경될 수 있다는 것을 알아야 합니다!