英文:
express.js css not loading but html does
问题
文件夹和文件
server.js 这是我目前创建的内容
//导入包
const express = require('express');
const admin = require('firebase-admin');
const bcrypt = require('bcrypt');
const path = require('path');
//声明静态路径
let staticPath = path.join(__dirname, "js");
//初始化 express.js
const app = express();
//中间件
app.use(express.static(staticPath));
//路由
//主页路由
app.get("/", (req, res) => {
res.sendFile(path.join(staticPath, "index.html"));
})
//注册路由
app.get("/signup", (req, res) => {
res.sendFile(path.join(staticPath, "signup.html"));
})
// 404 路由
app.get("/404", (req, res) => {
res.sendFile(path.join(staticPath, "404.html"));
})
app.use((req, res) => {
res.redirect('/404');
})
app.listen(3000, () => {
console.log('listening on port 3000.......');
})
index.html 这是我目前创建的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edga">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clothing - Best Apparels Online Store</title>
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
<nav class="navbar"></nav>
<!-- hero section-->
<header class="hero-section">
<div class="content">
<img src="../img/light-logo.png" class="logo" alt="">
<p class="sub-heading">best fashion collection of all time</p>
</div>
</header>
<!-- card-container-->
<section class="product">
<h2 class="product-category">best selling</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card1.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<!-- 其他产品卡片 -->
</div>
</section>
<!-- 集合 -->
<section class="collection-container">
<a href="#" class="collection">
<img src="../img/women-collection.png" alt="">
<p class="collection-title">women <br> apparels </p>
</a>
<!-- 其他集合 -->
</section>
<!-- card-container-->
<section class="product">
<h2 class="product-category">Shirts</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 1.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<!-- 其他产品卡片 -->
</div>
</section>
<!-- card-container-->
<!-- 其他内容 -->
<!-- 其他内容 -->
<!-- 其他内容 -->
<footer>
</footer>
<script src="../js/nav.js"></script>
英文:
folder and files
server.js this is what i created so far
//importing packages
const express = require('express');
const admin = require('firebase-admin');
const bcrypt = require('bcrypt');
const path = require('path');
//declare static path
let staticPath = path.join(__dirname, "js");
//intializing express.js
const app = express();
//midlewares
app.use(express.static(staticPath));
//routes
//home route
app.get("/", (req, res) => {
res.sendFile(path.join(staticPath, "index.html"));
})
//signup route
app.get("/signup", (req, res) => {
res.sendFile(path.join(staticPath, "signup.html"));
})
// 404 route
app.get("/404", (req, res) => {
res.sendFile(path.join(staticPath, "404.html"));
})
app.use((req, res) => {
res.redirect('/404');
})
app.listen(3000, () => {
console.log('listening on port 3000.......');
})
index.html this is what i created so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edga">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clothing - Best Apparels Online Store</title>
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
<nav class="navbar"></nav>
<!-- hero section-->
<header class="hero-section">
<div class="content">
<img src="../img/light-logo.png" class="logo" alt="">
<p class="sub-heading">best fashion collection of all time</p>
</div>
</header>
<!-- card-container-->
<section class="product">
<h2 class="product-category">best selling</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card1.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card2.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card3.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card4.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card5.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card6.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card7.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card8.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
</div>
</section>
<!-- collections -->
<section class="collection-container">
<a href="#" class="collection">
<img src="../img/women-collection.png" alt="">
<p class="collection-title">women <br> apparels </p>
</a>
<a href="#" class="collection">
<img src="../img/men-collection.png" alt="">
<p class="collection-title">women <br> apparels </p>
</a>
<a href="#" class="collection">
<img src="../img/accessories-collection.png" alt="">
<p class="collection-title">accessories</p>
</a>
</section>
<!-- card-container-->
<section class="product">
<h2 class="product-category">Shirts</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 1.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 2.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 3.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 4.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card5.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card6.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card7.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card8.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
</div>
</section>
<!-- card-container-->
<section class="product">
<h2 class="product-category">Shoes</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card9.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card10.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card11.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card12.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card5.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card6.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card7.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card8.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="../js/nav.js"></script>
<script src="../js/home.js"></script>
<script src="../js/footer.js"></script>
</body>
</html>
when i run localhost:3000 html does load but css doesnt
what should i do?
i am doing trying to recreate tutorial, but the author doesnt have this problem, nor somebody in the comments, this is the link of the creator https://www.youtube.com/watch?v=yYSfOe0QBOk&list=PLqm86YkewF6S45smPYeNv01aFFKWZSgYD&index=2&ab_channel=ModernWeb
答案1
得分: 1
使用 app.use(express.static(staticPath)); 声明为静态目录的目录不应该是 js 目录。最好创建一个名为 public 的目录，将其中的 css 和 js 目录移动到该目录中。
之后，您的 CSS 文件的 URL 将是 /css/xxxx.css，而您的 JS 文件的 URL 将是 /js/xxxx.js。
请告诉我们 ^^
英文:
The directory that you declare as static with app.use(express.static(staticPath)); shouldn't be the js directory. You'd better create a directory like public in which you move your css and js directories.
After that, your url for your css files will be /css/xxxx.css and for your js files /js/xxxx.js
Let us know ^^
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论