构建 CSS 文件被 Heroku 应用程序部署拒绝

Question

我已经在 Heroku 中部署了一个 React + NodeJS 应用程序，部署很顺利，并且工作了几个小时。但是，删除缓存后，它现在拒绝加载页面。错误如下：

Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

和

GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)

第一个，MIME 错误是指由 Parcel 构建生成的缩小文件。它在位于 dist 文件夹内的 index.html 文件中调用。这是调用它的行： <link rel="stylesheet" href="/src.78399e21.css">

它的孪生 .js 文件也在 index.html 中被调用： <script src="/src.78399e21.js"></script>

问题 1)：我不知道如何使 CSS 文件被接受。其中，有一些从SCSS原始文件中导入的与每个组件相关的注释。我尝试既删除注释又将文件的 type 添加为 CSS，但没有成功。这应该是一个微妙的细节，但我不知道还能尝试什么。

问题 2： Heroku 找不到的 JS 文件与 index.html 在同一文件夹中。但是app的路由已经被定义为有client(Router basename="/client")作为root(https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css)，文件找到了，但是改变了[=中文件的路径14=]（你可以在下面看到）解决了 404 问题，但带来了另一个问题（说“<”标记在越界的系统 js 文件中是意外的）。

我尝试运行另一个 Parcel 构建、提交更改、清理缓存，但没有任何效果。谁能给我一些帮助？如有必要，我很乐意提供更多详细信息。

位于 dist 文件夹（生产文件所在的位置）中的 index.html 文件代码：

<html>

<head>
  <title>myFlix</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>

<body>
  <div class="app-container"></div>
  <script src="/src.78399e21.js"></script>
</body>
</html>

提前致谢

Answer 1

If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).

这是因为您需要对 <script src="/src.78399e21.js"></script> 行进行相同的 /client/ 修复。

在这两种情况下，您的 CSS/JS 文件的 URL 是错误的，因此 CSS/JS 解析器正在尝试（但失败）处理结果404 页面的 HTML 为 CSS/JS。

构建 CSS 文件被 Heroku 应用程序部署拒绝

Build CSS file refused by Heroku app deployment

node.js

reactjs

heroku

react-router

parceljs