[英]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 告訴我代碼太多,文本不夠,所以我嘗試添加更多。
app.get('/', (request, responseC) => {
更改為app.get('/style.css', (request, responseC) => {
在項目根目錄中創建一個名為“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">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.