如何像导入JS模块一样导入CSS模块？

本文共计1129个文字，预计阅读时间需要5分钟。

目录+前言+什么是可构造样式表？+使用+CSS+Module+Script+导入断言（assert）是什么？+样式表的动态导入+@import+的规则尚不支持+总结+前言+Chrome+93+版本更新了令人兴奋的新功能新

目录

• 前言
• 什么是可构造样式表？
• 使用 CSS Module Script
• 导入断言（assert）是什么？
• 样式表的动态导入
• @import 的规则尚未支持
• 总结

前言

刚刚发布的 Chrome 93 版本中更新了一项令人兴奋的新特性：CSS Module Script，使用它你可以像导入一个 JavaScript 模块一样加载 CSS 样式。

然后，你可以将 CSS 样式与可构造样式表(Constructable Stylesheet) 相同的方式作用于 document 和 shadow dom，这比其他加载 CSS 的方式更方便、更高效。

什么是可构造样式表？

在了解 CSS Module Script 之前，我们先来了解下啥是可构造样式表(Constructable Stylesheet)。和表面意思一样，它是为了 CssStyleSheet 可直接构造而设计的，在 document 和 shadow dom 下都可以使用。