使用 ESM 中的 CSS 模块脚本导入 CSS

Jan 12, 2023

传统上，有 几种方法 可以将 css 静态添加到页面，也可以通过 JavaScript 动态添加 css，方法是创建一个 link 元素，其中 rel="stylesheet" 和 href 设置为 css 文件位置，或者创建一个 style 元素，其中 css 定义作为其内容。现在有第三种方法：通过名为“CSS 模块脚本”的功能，直接从 ESM 脚本标记中导入 css，类似于导入 JavaScript 资源的方式。

例子

<div id="app" class="has-text-success">{{ message }}</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  import bulma from 'https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css' assert { type: 'css' };
  document.adoptedStyleSheets.push(bulma);

  createApp({
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }).mount('#app');
</script>

参考资料

• Using CSS Module Scripts to import stylesheets
• CSS Module Scripts #541

css