Import css with css module scripts in esm

Traditionally there are a few ways to statically add css to a page, and via JavaScript it can also be dynamically added by either creating a link element with rel="stylesheet" and href set to a css file location, or creating a style element with css definitions as its content. Now there is a 3rd way: importing css directly from within an ESM script tag, similarly to the way of importing JavaScript resources, via a feature called CSS Module scripts.


<div id="app" class="has-text-success">{{ message }}</div>
<script type="module">
  import { createApp } from '';
  import bulma from '' assert { type: 'css' };

    data() {
      return {
        message: 'Hello World!'