CSS 모듈 스크립트를 사용하여 스타일시트 가져오기

CSS 모듈 스크립트를 사용하여 JavaScript 모듈과 동일한 문법으로 CSS 스타일시트를 가져오는 방법을 알아보세요.

Dan Clark

새로운 CSS 모듈 스크립트 기능을 사용하면 JavaScript 모듈과 마찬가지로 import 문을 사용하여 CSS 스타일 시트를 로드할 수 있습니다. 그런 다음 구성 가능한 스타일시트와 동일한 방식으로 스타일시트를 문서 또는 섀도 루트에 적용할 수 있습니다. 이는 CSS를 가져오고 적용하는 다른 방법보다 더 편리하고 성능이 더 우수할 수 있습니다.

브라우저 지원

CSS 모듈 스크립트는 버전 93의 Chrome 및 Edge에서 기본적으로 사용할 수 있습니다.

Firefox 및 Safari에서는 아직 지원되지 않습니다. 구현 진행 상황은 각각 Gecko 버그 및 WebKit 버그에서 추적할 수 있습니다.

기본 요건

CSS 모듈 스크립트 사용

CSS 모듈 스크립트를 가져와 다음과 같이 문서 또는 shadow root에 적용합니다.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

CSS 모듈 스크립트의 기본 내보내기는 가져온 파일의 콘텐츠가 포함된 구성 가능한 스타일시트입니다. 다른 구성 가능한 스타일시트와 마찬가지로 adoptedStyleSheets를 사용하여 문서 또는 shadow root에 적용됩니다.

JavaScript에서 CSS를 적용하는 다른 방법과 달리 <style> 요소를 만들거나 CSS 텍스트의 JavaScript 문자열을 조작할 필요가 없습니다.

CSS 모듈에는 JavaScript 모듈과 동일한 이점도 있습니다.

  • 중복 삭제: 동일한 CSS 파일이 애플리케이션의 여러 위치에서 가져오기되는 경우에도 한 번만 가져오고, 인스턴스화하고, 파싱합니다.
  • 일관된 평가 순서: 가져오는 JavaScript가 실행 중일 때 가져오는 스타일시트가 이미 가져오고 파싱되었다고 신뢰할 수 있습니다.
  • 보안: 모듈은 CORS를 사용하여 가져오고 엄격한 MIME 유형 확인을 사용합니다.

가져오기 어설션('assert'은 무엇인가요?)

import 문의 assert { type: 'css' } 부분은 가져오기 어설션입니다. 이 속성은 필수입니다. 이 속성이 없으면 import가 일반 JavaScript 모듈 가져오기로 처리되며 가져온 파일에 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 문제에서 이 사양 토론을 추적하세요.