csshaskellreflexreflex-domobelisk

Where to put the css file when using obelisk

I want to make two div's float side by side using Obelisk. For this I used the information from this post, How to place div side by side and for this solution classes have to be declared in css. Following the advice of this tutorial (https://github.com/hansroland/reflex-dom-inbits/blob/master/tutorial.md), more specifically the part about mainWidgetWithHead, I put the commands in a different file. The problem is, however, that I can't find where the css-file should be stored in order to get accessed by the program.

I tried to put it in several places within the automatically generated directory by "ob init", but I always end up with an empty css-file when I load it in my browser.

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 "/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."

This error message is consequently given, no matter where I put the css-file: Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://127.0.0.1:8000/css/cssTest.css"

Solution

  • You should store all of the static assets your site needs live in the static directory created by ob init. this is especially important for mobile builds.

    The other thing you need to do is refer to those assets like the following:

    styleSheet $ static @"css/cssTest.css"
             ^^^^^^^^

    assuming you've turned on TypeApplications, which is the default in the obelisk skeleton.