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

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

javascript html css reactjs elixir

Javascript 网页正在接收css文件，但未实现它,javascript,html,css,reactjs,elixir,Javascript,Html,Css,Reactjs,Elixir,我正在制作一个react网页，该网页由flask托管，并通过elixir调用。当我尝试调用我的网页时。将加载react html，但不显示css的任何部分。根据chromes web developer工具，我的css文件被加载并返回HTTP状态代码200。另外，当我预览css文件的内容时，我可以看到所有css代码都在那里。它只是没有将代码实现到html页面中我的html页面已加载到 <!DOCTYPE html> <html> <head> &

我正在制作一个react网页，该网页由flask托管，并通过elixir调用。当我尝试调用我的网页时。将加载react html，但不显示css的任何部分。根据chromes web developer工具，我的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>

有人知道是什么原因导致我的css没有被实现到html中，以及我应该如何修复它吗？

问题不是css调用不正确，而是Elixir从flask中获取css时没有将css与html正文分离。默认情况下，当它返回网页时，会使整个页面

text/html

。这就是为什么返回的文件状态代码为200，但没有实现。您需要编辑Elixir return标头来修复此问题。答案与此类似。此代码将进入它从flask服务器接收到的代码主体，并将元数据与代码的其余部分分开，以便css返回为

type=“text/css”

将鼠标悬停在main.css上，然后说出该url是什么？您是否试图用css设置react组件的样式？当我将鼠标悬停在main.css上时，它会显示

http://localhost:3005/time-period/static/css/main.css

是的，我正在尝试用css设计我的react组件，而您正在通过

http://localhost:3005/

也是吗？是的<代码>http://localhost:3005 转到Elixir，它代理位于

http://localhost:5000

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

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)