Куда поместить файл css при использовании обелиска

Question

Я хочу сделать два 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"

Answer 1

Вы должны хранить все статические ресурсы, в которых нуждается ваш сайт, в static каталог, созданный ob init, это особенно важно для мобильных сборок.

Еще одна вещь, которую вам нужно сделать, это сослаться на эти активы, как показано ниже:

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

при условии, что вы включили TypeApplications, который используется по умолчанию в каркасе обелиска.