simple-web-system technology

Webに関する技術をシンプルに扱うブログ

elmで簡単にcssを読み込ませる方法

調べてもあまり出てこないのが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を使う(楽なのでおすすめ)

  1. テンプレートとなるHTMLを作成する
  2. 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タグを手動で挿入する