how to use css with Suave web

Question

i'm a newbie F# programming,

and now i try to make web with F# and Suave then i follow from this link

i have a problem that i cannot use css in my project (see on image)

id="box" wasn't show on browser

file 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

and #box in file Site.css

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

how i can fix it ?

Answer 1

This could be a caching issue - if you are changing the CSS file and the browser caches the old version, then recent changes on the server might not be visible.

You can probably configure your browser to avoid caching. Alternatively, you can change your server to send HTTP headers that disable caching (during development and debugging):

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