如何在Elm中使用单独的外部CSS文件，支持Browser.Document/Application？

在Elm中使用外部样式表并非只能通过Browser.element实现，Browser.Document和Browser.Application都有非常简便的引入方案，不需要使用Elm编写CSS的相关库也能直接加载现成的spectre.min.css。

方案1：直接修改宿主HTML（最简便，零Elm代码改动） #

不管你使用哪种Browser入口，Elm程序始终运行在你提供的HTML文档上下文内，全局引入的CSS对所有Elm渲染的元素都生效。你完全可以沿用你示例中的HTML写法，只需要确保HTML的<head>标签内保留样式表引入即可：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="spectre.min.css">
    <script src="elm.js"></script>
  </head>
  <body>
    <div id="elm-app-is-loaded-here"></div>
    <script>
      var app = Elm.Main.init({
        node: document.getElementById("elm-app-is-loaded-here")
      });      
    </script>
  </body>
</html>

哪怕你把入口切换为Browser.Document或者Browser.Application，这个写法依然有效，不需要调整任何Elm逻辑。

方案2：在Elm代码中引入样式表 #

如果你希望把样式表的引入逻辑放在Elm代码中统一管理，不需要修改HTML，也可以直接在顶层view函数中插入link节点：

首先导入依赖：

import Html exposing (Html, node)
import Html.Attributes exposing (rel, href)

之后在view返回的节点列表中加入样式表引入即可，以Browser.Document为例：

view : Model -> Document Msg
view model =
  { title = "你的页面标题"
  , body = 
      [ node "link" [ rel "stylesheet", href "spectre.min.css" ] []
      -- 你原本的页面内容节点
      , div [] [ text "页面内容" ]
      ]
  }

Browser.Application的写法同理，直接在顶层view的节点列表开头添加上述link节点即可，浏览器会自动加载样式表并全局生效。

内容的提问来源于stack exchange，提问作者John Smith Optional