使用方尖碑时在哪里放置css文件 [英] Where to put the css file when using obelisk

问题描述

我想使用方尖碑并排放置两个div的浮点数.为此，我使用了这篇文章中的信息，如何将div并排放置，为此解决方案类必须在css中声明.遵循本教程的建议( https://github.com/hansroland/reflex-dom-inbits/blob/master/tutorial.md )，尤其是有关mainWidgetWithHead的部分，我将命令放在了另一个文件中.问题是，但是，我找不到要被程序访问的css文件应该存储在哪里.

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.

我试图通过"ob init"将其放置在自动生成的目录中的多个位置，但是当我将其加载到浏览器中时，总是会得到一个空的css文件.

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.

在下面，您可以看到frontend/src/Frontend.hs中使用的前端功能的最小示例.

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

因此，无论我将css文件放在何处，都会给出此错误消息: 资源被解释为样式表，但以MIME类型text/plain传输:" http://127.0.0.1: 8000/css/cssTest.css "

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"

推荐答案

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

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"
             ^^^^^^^^

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

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

这篇关于使用方尖碑时在哪里放置css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！