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

Question

我想用 Obelisk 让两个 div 并排漂浮。为此，我使用了 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) 中的信息，更具体地说是关于 mainWidgetWithHead 的部分，我将命令放在不同的文件中。但是，问题是我找不到 css 文件应该存储在哪里以便程序访问。

我试图将它放在 "ob init" 自动生成的目录中的几个地方，但是当我在浏览器中加载它时，我总是得到一个空的 css 文件。

下面您可以看到 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."

无论我将 css 文件放在哪里，都会出现此错误消息：资源解释为样式表但使用 MIME 类型传输 text/plain：“http://127.0.0.1:8000/css/cssTest.css”

Answer 1

您应该将站点需要的所有静态资产存储在 ob init 创建的 static 目录中。这对于移动构建尤为重要。

您需要做的另一件事是参考如下资产：

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

假设您已开启 TypeApplications，这是方尖碑骨架中的默认设置。

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

Where to put the css file when using obelisk

css

haskell

reflex

reflex-dom

obelisk