csshaskellreflexreflex-dom

Staticfile error when using Ob and reflex to import CSS-file

I want to make two div's float side by side using Obelisk. For this I already asked this question (Where to put the css file when using obelisk). This provided the answer that I should put my stuff in static and add static @filename. However, this approach results in an error.

Below you can see a minimal example of the frontend function used in frontend/src/Frontend.hs.

frontend :: Frontend (R FrontendRoute)
frontend = Frontend
    { _frontend_head = prerender_ (text "Loading..") headElement
    , _frontend_body = prerender_ (text "Loading...") bodyElement
    }

headElement :: MonadWidget t m => m ()
headElement = do
    el "title" $ text "Title"
    styleSheet $ static @"/css/cssTest.css"
        where
            styleSheet link = elAttr "link" (Map.fromList [
                    ("rel", "stylesheet"),
                    ("type", "text/css"),
                    ("href", link)
                ]) $ return ()

bodyElement :: MonadWidget t m => m ()
bodyElement = elClass "div" "container" $ do
    elClass "div" "fixed" $ do
        el "h2" $ text "Button enabled / disabled"
    elClass "div" "flex-item" $ do
        el "h2" $ text "Second paragraph next to it."

The following error message was given: Could not deduce (StaticFile "css/cssTest.css") arising from a use of 'static'.

Solution

  • This worked for me after I removed the leading / from "/css/cssTest.css" and restarted ob run (assuming you placed the file at static/css/cssTest.css).