CSS 未加载 node.js 和快递
[英]CSS not loading with node.js and express
问题描述
运行我的 HTML 时，我的 CSS 不会加载。 HTML 与 CSS 正确连接，但 express 和 node.js 似乎忽略了它。 我看不懂文章和教程或其他堆栈溢出问题，所以我只发送代码。
我也收到一个错误，说 MIME 类型是 text/HTML，即使我已经检查了多次，MIME 类型确实是 text/CSS。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Road</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="infinite">
<div class="shadow"></div>
</div>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#9bdfff, #009be4);
}
.infinite {
position: relative;
width: 800px;
height: 160px;
background: #525252;
transform-origin: bottom;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(30deg);
}
.infinite::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
background-size: 120px;
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: -120px;
}
}
.infinite::after {
content: "";
position: absolute;
width: 100%;
height: 30px;
background: #333;
bottom: -30px;
transform-origin: top;
transform: perspective(500px) rotateX(-25deg)
}
.shadow {
position: absolute;
bottom: -93px;
left: 50%;
transform: translateX(-50%);
width: 95%;
height: 60px;
background: linear-gradient(#000, transparent);
opacity: 0.5;
}
JS：
const path = require('path');
const { readFile } = require('fs');
const app = express();
app.get('/', (request, response) => {
response.sendFile(path.join(__dirname, "index.html"))
});
app.get('/', (request, responseC) => {
responseC.sendFile(path.join(__dirname, "style.css"))
});
app.listen(process.env.PORT || 8080, () => console.log('App availible on http://localhost:8080'))
Stackoverflow 告诉我代码太多，文本不够，所以我尝试添加更多。
2 个解决方案
解决方案1
0 2021-11-29 22:00:02
app.get('/', (request, responseC) => {更改为app.get('/style.css', (request, responseC) => {
解决方案2
0 2021-11-30 03:29:28
在项目根目录中创建一个名为“public”的文件夹，并使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件：
app.use(express.static('public'));
或者
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')));
如果你做的一切都正确，那么你可以访问这样的文件：
http://localhost:3000/css/style.css
css 链接
<link rel="stylesheet" href="/style.css">
Css 未加载 node.js 快递
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.