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

Question

我想使用 Obelisk 让两个 div 并排浮动。为此，我使用了这篇文章中的信息How to place div side by side，并且为此解决方案类必须在 css 中声明。按照本教程 (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，这是方尖碑骨架中的默认设置。