Javascript 提供静态资源的Firebase和ExpressJS出现CSS MIME类型错误

我的firebase web项目有一些问题。我正在尝试将我的firebase托管站点连接到函数，以便将其转换为更动态的应用程序，并使用函数提供的缓存功能

但每次我尝试为我的应用程序提供服务时，我的窗口都会不断加载—几乎就像它被卡住或拉大文件一样。过了一会儿，我的样式表出现了一条错误消息（引导和自定义表）

这是Chrome的屏幕截图

我的代码如下所示 请注意，我在express中使用把手。我基本上遵循Firebase自己的安装指南：

const functions=require（'firebase-functions'）；
const firebase=require（'firebase-admin'）；
const express=require（'express'）；
常量引擎=需要（“合并”）；
const hbs=需要（“把手”）；
const firebaseApp=firebase.initializeApp(
functions.config（）.firebase
);
//应用程序设置
常量app=express（）；
应用程序使用（express.static（'misoponia_web/public/public'））
附件发动机（“hbs”、发动机、把手）；
应用程序集（“视图”、“视图”）；
应用程序集（“查看引擎”、“hbs”）；
//路线
app.get（“/”，（请求、响应）=>{
response.set（'Cache-Control'，'public，max-age=300，s-max-age=600'）；
response.render（'index.hbs'）；
});
//火基出口
exports.app=functions.https.onRequest（app）
/*整体静态元素和样式*/
html{
身高：100%；
}
身体{
背景色：白色；
字体系列：Arial、Helvetica、无衬线字体；
身高：100%；
/*厌色*/
--主蓝色：#1B508E；
--味噌白：#fefefe；
--味噌黑：#1b2128；
--味噌粉：dbd3d6；
--味噌深蓝色：132647；
--味噌灰：#a2a3a3；
/*其他设计颜色*/
--主蓝色：#1B508E；
}
h1{
字体系列：“Ramabhadra”，无衬线；
字号：115px；
字体大小：粗体；
}
氢{
字体系列：“Ramabhadra”，无衬线；
字体大小：75px；
字体大小：粗体；
颜色：var（--味噌深蓝色）；
}
h3{
字体系列：“Ramabhadra”，无衬线；
字体大小：36px；
字体大小：粗体；
}
h4{
字体系列：“Ramabhadra”，无衬线；
字体大小：29px；
}
p{
字体系列：“Roboto”，无衬线；
字体大小：25px；
字体大小：300；
}
a{
文字装饰：无；
}
a:悬停{
文字装饰：无；
}
/*饼干横幅*/
#饼干{
z指数：2；
}
#饼干横幅{
背景：var（--味噌深蓝色）；
颜色：var（--味噌白）；
字体大小：16px；
位置：绝对位置；
底部：0px；
宽度：100%；
高度：100px；
填充顶部：10px；
左侧填充：25px；
右边填充：25px；
垫底：10px；
过渡时间：500ms；
}
#饼干横幅{
字体大小：16px；
}
.饼干按钮{
颜色：var（--味噌白）；
字体大小：15px；
背景色：var（--味噌深蓝色）；
边框：2px实心var（--味噌深蓝色）；
宽度：200px；
过渡时间：500ms；
}
.cookie按钮：悬停{
不透明度：75%；
}
/*厌食症头版标题样式*/
.厌食症{
颜色：var（--味噌白）；
过渡：1.5s；
字体大小：粗体；
过渡定时功能：易进易出；
}
.恐惧症：悬停{
颜色：var（--味噌深蓝色）；
过渡：1.5s；
字体大小：粗体；
}
#封面图片{
背景图片：url（'../imgs/miso-1.png'）；
背景尺寸：封面；
背景重复：无重复；
身高：100%；
最大高度：1200px；
过渡：1s；
过渡延迟：500ms；
过渡定时功能：易进易出；
z指数：1；
}
#封面图片：悬停{
背景图片：url（'../imgs/miso cover.png'）；
背景尺寸：封面；
背景重复：无重复；
身高：100%；
最大高度：1200px；
}
.垂直中心{
最小高度：100%；/*浏览器的回退不支持vh单元*/
最小高度：100vh；/*这两条线计为一条：-）*/
显示器：flex；
对齐项目：居中；
}
/*文本区*/
#介绍{
边缘顶部：150px；
边缘底部：150px；
}
#欢迎页眉{
边缘底部：100px；
文本对齐：对齐；
}
.欢迎辞{
字体大小：60px；
字体大小：粗体；
颜色：var（--味噌深蓝色）；
}
.欢迎文本底部{
字体大小：60px；
字体大小：粗体；
颜色：var（--味噌深蓝色）；
填充顶部：150px；
}
/*目录区*/
#内容标题h2的选项卡{
字体系列：“Ramabhadra”，无衬线；
字体大小：65px；
字体大小：粗体；
颜色：var（--味噌白）；
}
#目录{
背景图片：url（'../imgs/miso-3.png'）；
背景尺寸：封面；
边缘顶部：100px；
填充底部：100px；
填充顶部：50px；
过渡：1s；
过渡延迟：500ms；
过渡定时功能：易进易出；
}
.内容区{
背景色：var（--味噌白）；
颜色：var（--味噌黑）；
填充：15px 25px 10px 25px；
边框：5px固体var（--味噌深蓝色）；
边界半径：10px；
左边距：12px；
右边距：12px；
盒影：0px 0px 20px变压（--味噌深蓝色）；
}
.内容区p{
字体大小：20px；
}
/*章节风格*/
#第一章{
背景图像：url（'../imgs/Noise/Noise hover.png'）；
背景尺寸：封面；
背景色：var（--味噌深蓝色）；
颜色：var（--味噌白）；
过渡：2s；
}
#第二章{
背景图片：url（'../imgs/the london heart/IMG_6444.jpg'）；
背景尺寸：封面；
背景色：var（--味噌深蓝色）；
颜色：var（--味噌白）；
过渡：2s；
}
#第三章{
背景图像：url（'../imgs/i-hide/i-hide-gif-1.gif'）；
背景尺寸：封面；
背景色：var（--味噌深蓝色）；
颜色：var（--味噌白）；
过渡：2s；
}
#第四章{
背景图片：url（'../imgs/BLAA/img1.jpg'）；
背景尺寸：封面；
背景色：var（--味噌深蓝色）；
颜色：var（--味噌白）；
过渡：2s；
}
#小伙子