javascript - Firebase 和 ExpressJS 提供静态资源会导致 CSS MIME 类型错误
问题描述
我的 firebase web 项目有一些问题。我正在尝试将我的 firebase 托管站点连接到函数，以便我可以将其转换为更动态的应用程序并使用函数提供的缓存功能。
但是每次我尝试为我的应用程序提供服务时，我的窗口都会不断加载 - 几乎就像它卡住或拉出一个大文件一样。然后过了一会儿，它带有我的样式表的错误消息（引导程序和自定义表）
这是 Chrome 的屏幕截图 这是 我担心的第一条控制台消息。
我的代码看起来像这样 请注意，我正在使用带有 express 的车把。我基本上遵循 Firebase 自己的设置指南：https ://www.youtube.com/watch?v=LOeioOKUKI8&feature=emb_logo
const functions = require('firebase-functions');
const firebase = require('firebase-admin');
const express = require('express');
const engines = require('consolidate');
const hbs = require('handlebars');
const firebaseApp = firebase.initializeApp(
functions.config().firebase
);
// App settings
const app = express();
app.use(express.static('Misophonia_web/public/public'))
app.engine('hbs', engines.handlebars);
app.set('views','./views');
app.set('view engine', 'hbs');
// Routes
app.get('/', (request, response) => {
response.set('Cache-Control', 'public, max-age=300, s-max-age=600');
response.render('index.hbs');
});
// Firebase export
exports.app = functions.https.onRequest(app);/* Overall static elements and styles */
html {
height: 100%;
}
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
/* Misophonia colors */
--main-blue-color: #1B508E;
--miso-white: #fefefe;
--miso-black: #1b2128;
--miso-pink: #dbd3d6;
--miso-dark-blue: #132647;
--miso-grey: #a2a3a3;
/* Other colors for designs */
--main-blue-color: #1B508E;
}
h1 {
font-family: 'Ramabhadra', sans-serif;
font-size: 115px;
font-weight: bold;
}
h2 {
font-family: 'Ramabhadra', sans-serif;
font-size: 75px;
font-weight: bold;
color: var(--miso-dark-blue);
}
h3 {
font-family: 'Ramabhadra', sans-serif;
font-size: 36px;
font-weight: bold;
}
h4 {
font-family: 'Ramabhadra', sans-serif;
font-size: 29px;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 300;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Cookie banner */
#cookie {
z-index: 2;
}
#cookie-banner {
background: var(--miso-dark-blue);
color: var(--miso-white);
font-size: 16px;
position: absolute;
bottom: 0px;
width: 100%;
height : 100px;
padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
transition: 500ms;
}
#cookie-banner p {
font-size: 16px;
}
.cookie-button {
color: var(--miso-white);
font-size: 15px;
background-color: var(--miso-dark-blue);
border: 2px solid var(--miso-dark-blue);
width: 200px;
transition: 500ms;
}
.cookie-button:hover {
opacity: 75%;
}
/* Misophonia front page title styles */
.misophonia {
color: var(--miso-white);
transition: 1.5s;
font-weight: bold;
transition-timing-function: ease-in-out;
}
.misophonia:hover {
color: var(--miso-dark-blue);
transition: 1.5s;
font-weight: bold;
}
#cover-image {
background-image: url('../imgs/miso-1.png');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
max-height: 1200px;
transition: 1s;
transition-delay: 500ms;
transition-timing-function: ease-in-out;
z-index: 1;
}
#cover-image:hover {
background-image: url('../imgs/miso-cover.png');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
max-height: 1200px;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Text area */
#intro {
margin-top: 150px;
margin-bottom: 150px;
}
#welcome-header {
margin-bottom: 100px;
text-align: justify;
}
.welcome-text {
font-size: 60px;
font-weight: bold;
color: var(--miso-dark-blue);
}
.welcome-text-bottom {
font-size: 60px;
font-weight: bold;
color: var(--miso-dark-blue);
padding-top: 150px;
}
/* Table of content area */
#tabel-of-content-header h2 {
font-family: 'Ramabhadra', sans-serif;
font-size: 65px;
font-weight: bold;
color: var(--miso-white);
}
#table-of-content {
background-image: url('../imgs/miso-3.png');
background-size: cover;
margin-top: 100px;
padding-bottom: 100px;
padding-top: 50px;
transition: 1s;
transition-delay: 500ms;
transition-timing-function: ease-in-out;
}
.content-area {
background-color: var(--miso-white);
color: var(--miso-black);
padding: 15px 25px 10px 25px;
border: 5px solid var(--miso-dark-blue);
border-radius: 10px;
margin-left: 12px;
margin-right: 12px;
box-shadow: 0px 0px 20px var(--miso-dark-blue);
}
.content-area p {
font-size: 20px;
}
/* Chapter styles */
#chapter-1 {
background-image: url('../imgs/Noise/noise-hover.png');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-2 {
background-image: url('../imgs/the-london-heart/IMG_6444.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-3 {
background-image: url('../imgs/i-hide/i-hide-gif-1.gif');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-4 {
background-image: url('../imgs/BLAA/img1.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-5 {
background-image: url('../imgs/nights/IMG_6507.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-6 {
background-image: url('../imgs/today/today.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
#chapter-7 {
background-image: url('../imgs/cover/IMG_5307.jpg');
background-size: cover;
background-color: var(--miso-dark-blue);
color: var(--miso-white);
transition: 2s;
}
.chapter-btn {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
width: 200px;
box-shadow: 0px 0px 5px var(--miso-dark-blue);
transition: 500ms;
font-size: 20px;
margin-top: 25px;
margin-bottom: 15px;
}
.chapter-btn:hover {
opacity: 85%;
}
/* Next button */
.next-button {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
width: 275px;
box-shadow: 0px 0px 5px var(--miso-white);
transition: 500ms;
margin-top: 25px;
margin-bottom: 25px;
}
.next-button:hover {
color: var(--miso-white);
font-size: 30px;
background-color: var(--miso-dark-blue);
border: 3px solid var(--miso-dark-blue);
transition: 1s;
box-shadow: 0px 0px 20px var(--miso-dark-blue);
}
/* Footer section */
#footer {
margin-top: 25px;
margin-bottom: 25px;
color: var(--miso-black);
}
#footer a {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-transform: uppercase;
color: var(--miso-black);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 25px;
transition: 1s;
}
#footer a:hover {
background-color: var(--miso-dark-blue);
color: white;
}
/* Media queries */
@media only screen and (max-width: 600px) {
h1 {
font-size: 45px;
}
h2 {
font-size: 27px;
}
h3 {
font-size: 25px;
}
h4 {
font-size: 25px;
}
p {
font-size: 15px;
}
.welcome-text {
font-size: 25px;
}
.welcome-text-bottom {
font-size: 25px;
}
#tabel-of-content-header {
font-size: 27px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
{{!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145407129-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145407129-2');
</script> --}}
<!-- Boilerplate -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap link -->
<link rel="stylesheet" type="text/css" href="./css/library/bootstrap.min.css">
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="/Misophonia_web/public/index.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Ramabhadra|Roboto:400,900&display=swap" rel="stylesheet">
<!-- AOS scroll -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
<!-- Page begins -->
<title>misophonia • misophonia, a visual experience • GO BY LUCK</title>
</head>
<body>
<section id="cookie">
<div id="cookie-banner">
<p>'misophonia, a visual experience' only uses cookies for analytics purposes. If you wish to learn more, then you can read our cookie policy.</p>
<a href="./cookies"><button class="cookie-button">READ COOKIE POLICY</button></a>
<button id="close-cookie-banner" class="cookie-button">THAT'S OK WITH ME!</button>
</div>
</section>
<section id="cover-image" data-aos="fade-in">
<div class="d-flex justify-content-center vertical-center">
<h1 class="misophonia">misophonia</h1>
</div>
</section>
<section id="intro">
<div class="container-fluid">
<div class="row mb-3" data-aos="fade-in">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="d-flex justify-content-center">
<h1 id="welcome-header">misophonia, <br> a visual experience</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid" data-aos="fade-in">
<div class="row d-flex justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-10 col-xl-10">
<div>
<p class="welcome-text">
If you’re reading this, it means that misophonia has officially been released from its digital cage and is now living in the world around us.
</p>
<p class="welcome-text">
It’s been 3 years since I first sat down in my small bedroom in East London and started recording what has now grown to become a full-length hour-long album, ‘misophonia’. It’s been a long, fragile, powerful but extremely inspiring process to make this record. I hope you find that it sounds unique and personal.
</p>
<p class="welcome-text">
With ‘misophonia’ the idea was always to experiment a lot, especially with creating different universes and sonic worlds, from old home-recorded samples, vocals as well as hard (and soft) synthesizers. I would like to believe that misophonia is a pretty vivid and texturized album full of perfect imperfections.
</p>
<p class="welcome-text">
The point of this website is to be a hyperzine. A place that acts as a 'behind-the-scenes' and tells the story of ‘misophonia'.
</p>
<p class="welcome-text">
Thank you for your time and for listening to ‘misophonia’.
</p>
<p class="welcome-text">
Yours sincerely, <br>
Gustav <br>
GO BY LUCK <br>
</p>
<p class="welcome-text-bottom">
Ps. <br> This site is best experienced on a full-scale browser. Should you visit it on your phone, then please try not to go too far and use a full-scale browser instead. <br> I promise it will be worth it.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="table-of-content">
<div class="container-fluid">
<div class="row mt-4">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 mt-3 mb-2" id="tabel-of-content-header">
<div class="d-flex justify-content-center">
<h2>TABLE OF CONTENTS</h2>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="./noise"><button type="button" class="btn btn-outline-primary next-button mb-5">Start Chapter I</button></a>
</div>
<div class="row mt-4 d-flex justify-content-center">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-1">
<h3>Chapter I</h3>
<h4>misophonia is noise</h4>
<p>Noise is everything in misophonia</p>
<a href="./noise"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-2">
<h3>Chapter II</h3>
<h4>The heart of London</h4>
<p>London: throwback</p>
<a href="./london"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-3">
<h3>Chapter III</h3>
<h4>'I hide'</h4>
<p>'I hide' <br> (the super secret long version)</p>
<a href="./hide"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-4">
<h3>Chapter IV</h3>
<h4>BLAA, BLUE, Blå</h4>
<p>Blue photos</p>
<a href="./blaa"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-5">
<h3>Chapter V</h3>
<h4>the night I wrote 'Point & Shoot'</h4>
<p>All night I wrote</p>
<a href="./nights"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-6">
<h3>Chapter VI</h3>
<h4>Today, tomorrow</h4>
<p>It's not time to say goodbye</p>
<a href="./today"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center" data-aos="fade-in">
<div class="col-sm-10 col-md-10 col-lg-6 col-xl-6 content-area mt-3" id="chapter-7">
<h3>Chapter VII</h3>
<h3>Sleeve notes</h3>
<p>Thank you!<br> and bye-bye!</p>
<a href="./sleeve-notes"><button class="chapter-btn">GO TO CHAPTER</button></a>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="d-flex justify-content-left">
<a href="./cookies">Cookie & privacy policy</a>
</div>
</section>
<!-- Scripts -->
<script src="../js/mobile/mobile-detection.js"></script>
<script src="../js/cookie-banner.js"></script>
<!-- Obligatory bootstrap code -->
<script src="../js/library/bootstrap.min.js"></script>
<!-- AOS Scroll -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>我希望有一个人可以帮助我！提前致谢！
解决方案
推荐阅读
- php - 使用 PHP Goutte 抓取 Facebook 帖子数据？
- arrays - 查找最大数量
- oracle-apex - 当页面项输入值时，将数据动态插入到 APEX 页面项中
- sql - 仅用于覆盖索引的物化视图
- python-3.x - 如何仅在我的 wifi 上托管 Python Flask Web 应用程序
- amazon-web-services - 使用 AWS-CDK、python 将块储存设备映射添加到 EC2
- sql - SQL从同一个表中删除子集
- postgresql - org.postgresql.util.PSQLException：在此 ResultSet 中找不到列名 start_value
- rspec - Rails 6 如何正确测试 Enums _scopes: false
- cassandra - 对于调用存储库方法时的spring数据反应cassandra是在返回通量之前将查询的整个结果加载到内存