Css主文件未加载到浏览器答案

【问题标题】：Css main file not load to browserCss主文件未加载到浏览器
【发布时间】：2020-10-07 17:51:38
【问题描述】：

我有使用 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 的问题？ 此问题仅在生产中引起。

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

【问题讨论】：

标签： css reactjs nginx production-environment

【解决方案1】：

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

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

您需要记住，每次新构建时，输出文件的名称都会更改，主index.html 文件也会更新以链接到新文件，因此main.ca4e3296.chunk.css 可能有在过去的某个时候存在，但不再存在。目前，2.b42aba3b.chunk.css 和 main.a6f3b637.chunk.css 都按预期响应。

如果我是你，我会阅读更多关于你的捆绑器的信息（很可能是Webpack）

【讨论】：

嘿，我确实在路径 bucard.co.il / static / css / main.ca4e3296.chunk.css 中有这个文件（在底部，在所有组件 css 文件下。之前，我有只有main.ca4e3296.chunk.css 和2.b42aba3b.chunk.css 文件因为我没有生成源映射。问题在于，它无缘无故地严重发生了，我没有更改我的nginx 配置中的任何内容，并且一旦我上传了新的更新对于我的网站，构建项目，ftp文件并重新启动nginx，它突然没有css代码，生成souce map解决了这个问题。你怎么看？