在 Elm 开发过程中如何维护样式表？

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 如果你喜欢的话。

如果您更喜欢 webpack loader for Elm 而不是 gulp 或 grunt。

有一个年轻的项目提供了一个 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 开发过程中如何维护样式表？

How can I maintain stylesheets during Elm development?

elm