CSS主文件未加载到浏览器

问题描述

我有与Nginx一起使用的ubunto服务器，在我的react项目中运行npm run build之后，使用路径static / css / main.ca4e3296.chunk.css->创建的构建目录，这是项目的主要css文件。

在将目录建立到服务器上的ftp后，我检查了此文件并成功传输，但是在生产中，它的值是所有index.html内容（我不知道为什么）。

我也将所有static / css / main.ca4e3296.chunk.css文件的内容从服务器复制粘贴到浏览器，并且所有css再次工作，这意味着这里的问题是该文件的价值从服务器更改为浏览器。

此外，在控制台中，我收到以下消息：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://bucard.co.il/static/css/main.ca4e3296.chunk.css".

顺便说一下，如果是这个问题，这就是我的index.html页面：

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="utf-8" />
  <title>Bucard | Digital Business Card</title>

  <Meta name="viewport" content="width=device-width,initial-scale=1" />
  <Meta name="theme-color" content="#000000" />
  <link rel="canonical" href="https://bucard.co.il/" />

  <link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Assistant:wght@300&display=swap" as="style"
    onload="this.rel='stylesheet'" />
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" as="style"
    onload="this.rel='stylesheet'" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <Meta name="title" content="Bucard | Digital Business Card" />
  <Meta name="description"
    content="Bucard - Digital Card Website" />

  <!-- some analytics -->

  <Meta property="og:locale" content="he_IL" />
  <Meta property="og:type" content="website" />
  <Meta property="og:title" content="Bucard | Digital Business Card" />
  <Meta property="og:image" content="https://bucard.co.il/favicon.ico" />
  <Meta property="og:description"
    content="Bucard - Digital Card Website" />
  <Meta property="og:url" content="https://bucard.co.il/" />
  <Meta property="og:site_name" content="Bucard" />

</head>

<body>
  <div id="root"></div>
</body>

</html>

有什么需要帮助的吗？还是Nginx问题？ 此问题仅在生产上引起。

edit：刚刚看到从.env文件中删除GENERATE_SOURCEMAP = false可以解决此问题，但是再次显示了组件。所以这是临时解决方案。

解决方法

我只是查看了您网站的源代码，那里没有名为main.ca4e3296.chunk.css的CSS文件。

可能是nginx路由设置导致了重定向到404页面，这很好。

您需要记住，每次构建新版本时，输出文件的名称都会更改，，主index.html文件也会更新，以链接到新文件，因此{{1 }}可能在过去的某个时间存在，但现在已经不存在了。当前，main.ca4e3296.chunk.css和2.b42aba3b.chunk.css都按预期响应。

如果我是您，我会详细了解您的捆绑软件（很可能是Webpack）

production-environment reactjs reactjs