CSS 모듈 스크립트를 사용하여 자바스크립트 모듈과 동일한 구문을 사용하는 CSS 스타일시트를 가져오는 방법을 알아봅니다.
새로운 CSS 모듈 스크립트 기능을 사용하면 자바스크립트 모듈과 마찬가지로 import
문으로 CSS 스타일 시트를 로드할 수 있습니다. 그런 다음 구성 가능한 스타일시트와 동일한 방식으로 스타일시트를 문서 또는 섀도 루트에 적용할 수 있습니다. 이 방법은 CSS를 가져오고 적용하는 다른 방법보다 더 편리하고 성능이 우수합니다.
브라우저 지원
CSS 모듈 스크립트는 버전 93의 Chrome 및 Edge에서 기본적으로 사용할 수 있습니다.
Firefox와 Safari에서는 아직 지원되지 않습니다. 구현 진행 상황은 Gecko 버그 및 WebKit 버그에서 각각 추적할 수 있습니다.
기본 요건
- JavaScript 모듈에 관한 지식
- 구성 가능한 스타일시트에 관한 기본 지식
CSS 모듈 스크립트 사용
CSS 모듈 스크립트를 가져와 다음과 같이 문서 또는 섀도 루트에 적용합니다.
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
CSS 모듈 스크립트의 기본 내보내기는 가져온 파일의 콘텐츠인 구성 가능한 스타일시트입니다. 구성 가능한 다른 모든 스타일시트와 마찬가지로 adoptedStyleSheets
를 사용하여 문서 또는 섀도 루트에 적용됩니다.
JavaScript에서 CSS를 적용하는 다른 방법과 달리 <style>
요소를 만들거나 CSS 텍스트의 JavaScript 문자열을 혼동할 필요가 없습니다.
CSS 모듈에도 JavaScript 모듈과 동일한 이점이 있습니다.
- 중복 삭제: 애플리케이션의 여러 위치에서 동일한 CSS 파일을 가져오는 경우에도 한 번만 가져오기, 인스턴스화 및 파싱이 이루어집니다.
- 일관된 평가 순서: JavaScript 가져오기가 실행 중일 때는 가져오는 스타일시트가 이미 가져와 파싱된 상태로 사용될 수 있습니다.
- 보안: CORS를 통해 모듈을 가져오고 엄격한 MIME 유형 확인을 사용합니다.
가져오기 어설션('assert
'에 포함된 내용)
import
문의 assert { type: 'css' }
부분은 import 어설션입니다. 이 단계는 필수 항목입니다. 이 속성이 없으면 import
는 일반 JavaScript 모듈 가져오기로 취급되며 가져온 파일에 자바스크립트가 아닌 MIME 유형이 있는 경우 실패합니다.
import sheet from './styles.css'; // Failed to load module script:
// Expected a JavaScript module
// script but the server responded
// with a MIME type of "text/css".
동적으로 가져온 스타일시트
type:
'css'
가져오기 어설션을 위한 새로운 두 번째 매개변수와 함께 동적 가져오기를 사용하여 CSS 모듈을 가져올 수도 있습니다.
const cssModule = await import('./style.css', {
assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];
규칙 @import
개가 아직 허용되지 않음
현재 CSS @import
규칙은 CSS 모듈 스크립트를 포함하여 구성 가능한 스타일시트에서 작동하지 않습니다. 구성 가능한 스타일시트에 @import
규칙이 있는 경우 해당 규칙은 무시됩니다.
/* atImported.css */
div {
background-color: blue;
}
/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
border: 1em solid green;
}
<!-- index.html -->
<script type="module">
import styles from './styles.css' assert { type: "css" };
document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>
CSS 모듈 스크립트의 @import
지원이 사양에 추가될 수 있습니다. GitHub 문제에서 이 사양 논의를 추적하세요.