网页正在接收css文件但未实现它

问题描述 投票：2回答：1

我正在制作一个反应网页，由烧瓶托管并通过elixir调用。当我尝试拨打我的网页时。反应html加载，但显示非css。根据chromes web开发人员工具我的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

我刚刚在谷歌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和我应该如何尝试修复它？

javascript html css reactjs elixir
1个回答
2
投票

问题不在于css被错误地调用，而是当它从烧瓶中取出时，Elixir没有将css与html主体分开。当它默认返回网页时，它会使整个页面成为text/html。这就是返回状态代码为200但未实现的原因。您需要编辑Elixir返回标头来解决此问题。答案看起来与此类似。此代码将进入从flask服务器接收的代码体，并将元数据与其余代码分开，以便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)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.