веб-страница получает файл CSS, но не реализует его - PullRequest
Новая
       8

веб-страница получает файл CSS, но не реализует его

0 голосов
/ 04 сентября 2018

Я создаю реагирующую веб-страницу, которая размещается в колбе и вызывается через эликсир. Когда я пытаюсь позвонить на мою веб-страницу. Реакция HTML загружается, но не отображается CSS. Согласно инструменту разработчика Chrome, мой файл CSS загружается и возвращает код состояния HTTP 200. Также, когда я просматриваю содержимое файла CSS, я вижу, что там есть весь код CSS. Он просто не внедряет код в html-страницу.

моя HTML-страница, которая реагирует, загружена в 

<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
    <link rel="stylesheet" type="text/css" href="time-period/static/css/main.css"/>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

вкладка сети инструмента проверки Chrome

enter image description here

UPDATE

Я только что нашел в консоли Google Chrome: 

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3005/time-period/static/css/main.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3005/time-period/static/css/main.fd12a70d.css".

Кто-нибудь знает, что может привести к тому, что мой CSS не будет внедрен в HTML и как я должен попытаться это исправить?

1 Ответ

0 голосов
/ 05 сентября 2018

Проблема не в том, что css вызывается неправильно, а в том, что Elixir не отделяет css от тела html, когда получает его из колбы. Когда он возвращает веб-страницу по умолчанию, он делает всю страницу text/html. Вот почему файл возвращается с кодом состояния 200, но не реализован. Вам нужно отредактировать возвращаемый заголовок Elixir, чтобы это исправить. Ответ будет выглядеть примерно так. Этот код войдет в тело кода, который он получает от сервера фляги, и отделит метаданные от остальной части кода, поэтому css возвращается как type="text/css"

headers_kwlist = Enum.map(example.headers, fn { a, b } -> {String.to_atom(a), b} end)
conn
|> put_resp_content_type(headers_kwlist[:"Content-Type"])
|> html(example.body)
...