ESM の CSS モジュール スクリプトを使用して CSS をインポートする

従来、ページに CSS を静的に追加する方法は いくつか ありますが、JavaScript では、rel="stylesheet" と href を CSS ファイルの場所に設定して link 要素を作成するか、CSS 定義をコンテンツとして含む style 要素を作成することで、動的に追加することもできます。現在は、JavaScript リソースをインポートする方法と同様に、CSS モジュール スクリプト と呼ばれる機能を使用して、ESM スクリプト タグ内から直接 CSS をインポートする 3 番目の方法があります。

例

<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>

参考文献

css

🇨🇳 🇯🇵 📍 ⌚