使用方尖碑时css文件放在哪里

Question

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 "

Answer 1

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.