Question

我正在制作一个由烧瓶托管并通过e剂调用的反应网页。当我尝试调用我的网页时。 react html已加载，但未显示任何CSS。根据chromes网站开发人员工具，我的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检查工具的“网络”标签

更新

我刚刚在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中实现，我应该如何解决？

Answer 1

问题不在于css的调用不正确，而是当Elixir从烧瓶中获取CSS时，Elixir并未将其与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)

网页正在接收CSS文件，但未实现

1 个答案: