Question

我是Elm的新手并尝试使用elm-html构建一个网络应用。我无法设置工作流程来快速开发和查看结果。

我已经使用elm-reactor来提供和重新加载我的更改，但是我的应用程序来自localhost:8000/Foo.elm，不包含任何外部样式表。我必须为所有组件使用内联样式，大多数HTML指南都不鼓励这样做。我宁愿使用CSS（或CSS预处理器）。

我可以使用elm-make构建一个* .js文件，并将其包含在我维护的index.html中，但不会观察更改。

在Elm项目中包含CSS文件是否是错误的方法，如果没有，我如何在Elm之外维护样式表并在本地服务我的项目，同时观察更改？

Answer 1

由于这些限制，您可能最好使用elm-reactor进行主要开发而不是。使用你自己的外部CSS文件是完全可以接受的，我同意，这比在输出html中嵌入样式要好得多。

我已经使用gulp和gulp-elm包来设置一个文件监视任务，该任务在保存时编译所有Elm代码（以及SCSS文件），并且工作得非常好。

如果你进入那个，那就有一个Grunt plug-in for Elm。

如果您喜欢gulp或grunt，则有webpack loader for Elm。

有一个年轻的项目提供Single Page Application generator for Yeoman，它将一些实时重新加载任务捆绑在一起。对于它所做的一些决定，它是非常自以为是，但如果你想快速运行，这是一个很好的参考。

Answer 2

我找到了一个很好的解决方案，适合那些想要使用完整的CSS在elm-reactor中进行快速原型设计但又不想找出构建工具或更复杂的elm CSS包的人。你可以使用基本的elm，elm-html和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")
    ] 

...

Answer 3

https://github.com/elm-community/elm-webpack-starter是我第一次尝试超越elm-reactor +内联样式。这看起来很重。

我目前使用elm-live（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中。

Answer 4

我只是一个初学者，但是我发现自己经常使用浏览器CSS编辑器。

样式编辑器通常放置在JS控制台和HTML检查器附近，按F12键即可找到。

您可以只创建常规的Elm标记而无需任何样式，然后在浏览器中进行测试时手动导入样式表。完成项目后，只需将样式表手动添加到完成的应用程序中（标准<link>标签）。

这样做的好处是，在编写CSS时，浏览器可以提供实时预览。缺点是您必须使用浏览器的编辑器，与VS Code或Atom之类的东西相比，这可能不是最好的选择。

注意：我使用Firefox Developer Edition，它们的样式编辑器很棒。无法在Chrome浏览器上发表评论。

如何在Elm开发期间维护样式表？

4 个答案: