CSS not loading with node.js and express
Question
My CSS won't load when running my HTML. The HTML is hooked up correctly with the CSS but express and node.js seem to be ignoring it. I can't understand the articles and tutorials or other stack overflow questions so I'll just send the code.
I also get an error that says the MIME-type is text/HTML even though I've checked multiple times, the MIME-type is indeed 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 told me there's too much code, not enough text so I tried to add more.
2 answers
solution1
0 2021-11-29 22:00:02
Change app.get('/', (request, responseC) => { to app.get('/style.css', (request, responseC) => {
solution2
0 2021-11-30 03:29:28
create a folder with name "public" in your project root directory and use the following code to serve images, CSS files, and JavaScript files in a directory named public:
app.use(express.static('public'));
or
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')));
if you have done everything right then you can access file like this:
http://localhost:3000/css/style.css
css link
<link rel="stylesheet" href="/style.css">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.