使用 CSS 模块脚本导入样式表

了解如何使用 CSS 模块脚本以与 JavaScript 模块相同的语法导入 CSS 样式表。

丹·克拉克
Dan Clark
X GitHub

借助新的 CSS 模块脚本功能，您可以使用 import 语句加载 CSS 样式表，就像加载 JavaScript 模块一样。然后，样式表可以像可构造的样式表一样应用于文档或影子根。相较于其他导入和应用 CSS 的方式，这种方法更方便，效率更高。

浏览器支持

Chrome 和 Edge 93 版中默认提供 CSS 模块脚本。

目前尚不支持 Firefox 和 Safari。您可以分别在 Gecko bug 和 WebKit bug 中跟踪实现进度。

前提条件

使用 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 问题中跟踪此规范讨论。