調べてもあまり出てこないのが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タグを手動で挿入する