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

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

Dan Clark

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

브라우저 지원

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

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가 일반 JavaScript 모듈 가져오기로 취급되며 가져온 파일의 MIME 유형이 JavaScript가 아닌 경우 실패합니다.

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 문제에서 이 사양 설명을 추적할 수 있습니다.