使用 ESM 中的 CSS 模組腳本導入 CSS

Jan 12, 2023

傳統上，有幾種方法可以靜態添加css到頁面，也可以透過JavaScript動態添加，方法是創建一個帶有rel="stylesheet"和href的link元素設定為css檔案位置，或者創建一個以css定義作為其內容的style元素。現在有第三種方法：透過稱為「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