css - 如何在 Suave web 中使用 css

Question

我是 F# 编程新手，

现在我尝试使用 F# 和 Suave 制作网页然后我关注 this link

我有一个问题，我不能在我的元素中使用 css(见图片)

id="box" wasn't show on browser

文件View.fs

let index container =
html [] [
    head [] [
        title [] "Suave Music Store"
        cssLink "/Site.css"
    ]

    body [] [
        div ["id", "header"] [
            tag "h1" [] [
                a Path.home [] [Text "F# Suave Music Store"]
            ]
        ]

        div ["id", "main"] [
            div ["id", "box"] [
                a Path.Store.browse [] [Text "Test Link"]
                tag "h1" [] [
                    a "http://www.google.com" [] [Text "Google"]
                ]
            ]
        ]
        div ["id", "footer"] [
            Text "built with "
            a "http://fsharp.org" [] [Text "F#"]
            Text " and "
            a "http://suave.io" [] [Text "Suave.IO"]
        ]
    ]
]
|> htmlToString

和文件 Site.css 中的#box

#box
{
    border:4px solid #000;
}

我该如何解决？

Answer 1

这可能是一个缓存问题 - 如果您正在更改 CSS 文件并且浏览器缓存了旧版本，那么服务器上最近的更改可能不可见。

您或许可以配置您的浏览器以避免缓存。或者，您可以更改服务器以发送禁用缓存的 HTTP header (在开发和调试期间):

let noCache =
  Writers.setHeader "Cache-Control" "no-cache, no-store, must-revalidate"
  >>= Writers.setHeader "Pragma" "no-cache"
  >>= Writers.setHeader "Expires" "0"

// And then in your main handler add 'noCache'
pathRegex "(.*)\.(css|png)" >=> noCache >=> Files.browseHome