4

我想使用方尖碑让两个 div 并排浮动。为此，我使用了这篇文章中的信息，如何并排放置 div，对于这个解决方案，类必须在 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 ”

4

1 回答 1

4

您应该将站点所需的所有静态资产存储static在由ob init. 这对于移动构建尤其重要。

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

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

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

于 2019-08-16T18:02:51.237 回答