了解如何使用 CSS 模块脚本以与 JavaScript 模块相同的语法导入 CSS 样式表。
借助新的 CSS 模块脚本功能,您可以使用 import
语句加载 CSS 样式表,就像使用 JavaScript 模块一样。然后,您可以像使用可构建样式表一样将样式表应用于文档或阴影根。与其他导入和应用 CSS 的方法相比,这种方法更为便捷且性能更出色。
浏览器支持
Chrome 和 Edge 93 版中默认提供 CSS 模块脚本。
Firefox 和 Safari 尚不支持此功能。您可以分别通过 Gecko bug 和 WebKit bug 跟踪实现进度。
前提条件
- 熟悉 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
会被视为普通的 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".
动态导入的样式表
您还可以使用动态导入导入 CSS 模块,并为 type:
'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 问题。