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

CSS 모듈 스크립트를 사용하여 자바스크립트 모듈과 동일한 구문을 사용하는 CSS 스타일시트를 가져오는 방법을 알아봅니다.

댄 클라크
Dan Clark
X GitHub

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

브라우저 지원

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

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

기본 요건

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 문제에서 이 사양 논의를 추적하세요.