如何在Elm开发期间维护样式表？
我是Elm的新手，我正在尝试用elm-html构建一个web应用程序。我在设置工作流程以快速开发和查看我的结果时遇到了困难。
我使用elm-reactor来服务和重新加载我的更改，但是这为我的localhost:8000/Foo.elm应用程序提供服务，它不包括任何外部样式表。我必须为我的所有组件使用内联样式，这是大多数HTML指南所不鼓励的。我宁愿使用CSS (或者CSS预处理程序)。
我可以使用elm-make构建一个*.js文件，并将其包含在我维护的index.html中，但它不会观察更改。
在Elm项目中包含CSS文件是否是一种错误的方法?如果不是，我如何在Elm之外维护样式表，并在本地服务于我的项目，同时监视更改？
回答 4
Stack Overflow用户
发布于 2016-02-05 19:04:29
由于这些限制，你最好不要在你的主要开发中使用榆树反应堆。使用自己的外部CSS文件是完全可以接受的，我同意，这比在输出html中嵌入样式要好得多。
我已经使用gulp和榆树包设置了一个文件监视任务，该任务编译了保存时的所有Elm代码(以及SCSS文件)，并且工作非常出色。
如果你对此感兴趣，就会有一个为埃尔姆插上盖子。
如果你喜欢这样而不是吞咽或咕哝，那就有一个webpack榆树装载机。
有一个年轻的项目，它提供了一个面向约曼的单页应用程序生成器，它将一些实时重新加载的任务捆绑在一起。它对它所做的一些决定非常固执己见，但是如果你想要快速运行的话，这是一个很好的参考。
Stack Overflow用户
发布于 2016-11-24 03:50:17
我找到了一个很好的解决方案，为那些想要快速原型在榆树反应堆与充分的CSS，但不想找出构建工具或更复杂的elm包。使用基本的elm、elm和css，您可以很快地开始工作。
此解决方案使用标准的Elm生成内联样式，使用Html.node创建样式标记，以便将CSS规则应用于文档的body。
-- 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")
]
...Stack Overflow用户
发布于 2017-06-16 22:24:59
https://github.com/elm-community/elm-webpack-starter是我第一次尝试毕业于榆树反应堆+内联风格。好像有点重。
我目前使用elm (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/questions/35231436
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号