温馨提示:本文翻译自stackoverflow.com,查看原文请点击:node.js - Build CSS file refused by Heroku app deployment
heroku node.js react-router reactjs parceljs

node.js - 构建Heroku应用程序部署拒绝的CSS文件

发布于 2020-04-07 11:19:02

我已经在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构建生成的缩小文件。index.html文件dist内的文件中调用文件。这是调用它的行: <link rel="stylesheet" href="/src.78399e21.css">

它的孪生.js文件也称为index.html<script src="/src.78399e21.js"></script>

问题1):我不知道如何做才能使CSS文件被接受。在其中,有一些从SCSS原始文件导入的与每个组件相关的注释。我想同时删除注释和将type文件的添加为CSS,但没有成功。它应该是一个微妙的细节,但是我不知道还要尝试什么。

问题2:JS Heroku找不到文件位于的相同文件夹中index.html但是,该应用程序的路由已定义为以clientRouter basename="/client")作为根(https://flix-reloaded.herokuapp.com/client)。如果我使用clienthttps://flix-reloaded.herokuapp.com/client/src.78399e21.css手动键入URL,则会找到该文件,但是将文件路径更改为index.html(您可以在下面看到)可以解决404问题,但又带来了另一个问题(例如,超出范围的系统js文件中意外出现了“ <”令牌)。

我尝试运行另一个Parcel构建,提交更改,清理缓存,但是没有任何效果。谁能为我提供帮助?如有必要,我将乐意提供更多详细信息。

index.html文件dist夹内(生产文件所在的位置)中文件代码

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

提前致谢

查看更多

提问者
cgobbet
被浏览
89
ceejayoz 2020-02-01 01:33

如果我使用客户端手动输入URL(https://flix-reloaded.herokuapp.com/client/src.78399e21.css),则会找到该文件,但会在index.html中更改该文件的路径(您可以请参见下文)解决了404问题,但又带来了另一个问题(例如,超出范围的系统js文件中意外出现了“ <”令牌是意外的)。

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

在这两种情况下,您的CSS / JS文件的URL都不正确,结果CSS / JS解析器正在尝试(但失败)将最终的404页面的HTML作为CSS / JS处理。