私はエルムには新しく、elm-htmlでウェブアプリケーションを構築しようとしています。私は結果をすばやく開発して見るためにワークフローを設定するのに問題があります。Elmの開発中にどのようにスタイルシートを更新できますか？
私はelm-reactorを使用して変更を提供して再読み込みしましたが、外部スタイルシートを含まないlocalhost:8000/Foo.elmからアプリを提供しています。私はすべてのコンポーネントにインラインスタイルを使用する必要があります。これはほとんどのHTMLガイドラインでは推奨されていません。私はむしろCSS（またはCSSプリプロセッサ）を使用したいと思います。
elm-makeを使用して* .jsファイルを作成し、それを私が維持しているindex.htmlに含めることはできますが、変更は見られません。
ElmプロジェクトにCSSファイルを含めるのは間違ったアプローチですか、そうでない場合は、変更を監視しながら、私のプロジェクトをローカルで提供していますか？
ではなく、の方が、これらの制限のために主な開発にelm-reactorを使用する方が良いでしょう。独自の外部CSSファイルを使用することは完全に容認されており、出力HTMLにスタイリングを組み込むよりもはるかに良い方法です。
gulpとgulp-elmパッケージを使用して、保存時にすべてのElmコード（SCSSファイルだけでなく）をコンパイルするファイル監視タスクをセットアップしました。これはすばらしく機能します。
これには、Grunt plug-in for Elmがあります。
あなたがあふれていたり、嫌な人が多い場合は、webpack loader for Elmがあります。
Single Page Application generator for Yeomanという若干のプロジェクトでは、いくつかのライブリロードタスクがバンドルされています。それはいくつかの決定について非常に賛成ですが、すぐに実行したい場合は参考になります。
完全なCSSでelm-reactorで素早くプロトタイプを作成したいが、ビルドツールやより洗練されたelm CSSパッケージを探したくない人には、良い解決策が見つかった。基本的なelm、elm-html、およびcssを使用すれば、かなり早く始めることができます。
このソリューションでは標準のElmを使用してインラインスタイルを生成し、Html.nodeを使用してスタイルタグを作成し、ドキュメントのbodyにCSSルールを適用できます。
-- VIEWS
view model =
main_
[ cssMain ]
[
styleTag
, div
[ cssControlPanel ]
[
button
[ cssBtn
, cssBtnGenerate
, onClick GenerateMap
]
[ text "GENERATE MAP" ]
]
-- STYLES
styleTag : Html Msg
styleTag =
let
styles =
"""
body { overflow: hidden; }
"""
in
node "style" [] [ text styles ]
cssMain : Attribute Msg
cssMain =
style
[ ("backgroundColor", "#eee")
, ("position", "relative")
, ("width", "100vw")
, ("height", "100vh")
]
...
これは良いクイックソリューションですが、インラインスタイルを避けたいのですか？また、スタイルシートが複雑になると、リファクタリングしてSASSのようなプリプロセッサを追加するのは難しくなります。 – Eric
https://github.com/elm-community/elm-webpack-starterは、ニレ、原子炉+インラインスタイルを超えて卒業する私の最初の試みでした。それは一種の重いようでした。
ので、同様に私は現在、ニレ・ライブ（https://github.com/tomekwi/elm-live）を使用します。
$ cat <<——— > index.html
<!doctype html>
<link rel="stylesheet" href="style.css" />
<body>
<div></div>
<script src="elm.js"></script>
<script>Elm.Main.embed(document.querySelector("div"));</script>
</body>
———
$ elm-live Main.elm --output=elm.js --open
コードがMain.elmであるとスタイルはstyle.cssにしています。
https://stackoverflow.com/help/promotionを読んで従ってください – m02ph3u5
タスクランナーやスクリプトローダーを使用したくない方のためのelm-server（https://github.com/maxgurewitz/elm-server）もあります。 – lukewestby