如何在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标头(在开发和调试期间)：

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