elmで簡単にcssを読み込ませる方法 - simple-web-system technology

調べてもあまり出てこないのがElmでのCSSの使い方サンプルはpure.cssを読み込ませるもの

1. styleタグをview内に定義する（非推奨だけど楽）

div [] [
    node "style"
            [ type_ "text/css" ]
            [ text "@import url(//cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css)" ]
]

2. elm-liveを使う（楽なのでおすすめ）

テンプレートとなるHTMLを作成する
elm-liveでJSを出力しつつ、テンプレートのHTMLを開く

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">
  <script src="main.js"></script>
</head>

<body>
  <div id="elm"></div>
  <script>
  var app = Elm.Main.init({
    node: document.getElementById('elm')
  });
  </script>
</body>
</html>

elm-live src/Main.elm --start-page=./index.html -- --output=main.js --debug

3. Module Bundlerを使う

使ったことはないけど、聞いた感じ以下の物が使いやすいらしい

parcel（すごい楽らしい）
webpack

4. elm make

elm make ファイル名でhtmlを作成したあとに、作成したhtmlにlinkタグを手動で挿入する