Elmで外部cssを読み込みつつ、ホットリローディングしたい
ただ、Elmファイル単体を見てしまうので、外部cssなどを読み込ませた状態で確認したい場合は不便
elm makeして、index.htmlで読み込ませないとできない..
毎回これやるとめんどいのでelm reactorしながら、外部cssを読み込ませて、ファイルを見たかった
結果だけ言うと、elm reactor単体だと難しかった.
いけるのかもしれないけど、自分の環境だとうまく出来なかった
elm-live src/Main.elm --start-page=Main.html -- --output=elm.js
(index.htmlでもいいけど、elm-liveで特にargsを付けないと、index.htmlにMain.elmがビルドされて、上書きされるので、事故らないように変えてる)
src/**/*.elm..つまりsrc以下のelmファイルが更新されるたびにsrc/Main.elmをelm.jsにビルドしてくれる
これでMain.htmlの中にelm.jsを読み込む設定しておけば、elmファイルを修正するたびに自動で更新される(ホットリローディングが実現できる)
以下のような感じ
https://gyazo.com/8474e3f58310b6eedef87bd4d40bb47f
外部CSSを読み込みつつ、ホットリローディングが実現できた。
---
具体的なの
elm-liveのインストール
code: bash
$ npm install --global elm-live
Main.htmlの中身
code: Main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<!-- ここで外部cssと外部フォントを読み込んでる -->
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<!-- ビルドされたelmファイルを読み込み -->
<script src="elm.js"></script>
<script>
var app = Elm.Main.init({
<!-- 上記のid="elm-app-is-loaded-here"に展開させる -->
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
Main.elmの中身
code: Main.elm
module Main exposing (main, view)
import Html exposing (..)
import Html.Attributes exposing (..)
view model =
div []
]
]
[ text "Info"
]
[ text "Hello hoge --- foo"
]
]
]
main =
view "dummy model"
class で cssフレームワークに対応するクラス名を与えてあげればおk
---
参考ページ
----
コード全体