为什么 express.js 路由发送的 html 页面未连接到 css 样式表？

Question

So I have server.js file that imports a router

const path = require("path");
const express = require("express");
const app = express();

const PORT = 8080;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.use(require('./app/routing/htmlRoutes')); 

The router looks like this

const path = require("path");
var express = require('express');
var router = express.Router();



router.get('/', function(req, res) {
    res.sendFile('home.html', { root: path.join(__dirname, '../public') });
});

router.get('/survey', function(req, res) {
    res.sendFile('survey.html', { root: path.join(__dirname, '../public') });
});


module.exports = router;

It does work! It renders html pages, however those html pages have css stylesheets hooked up to them and located in the same directory, but they render as blank html sheets (unstyled)... How do I make them render with css stylesheets taken into account?

Answer 1

When the browser encounters the style reference of the loaded html file, it tries to load the file specified in the src attribute. Now your server script doesn't have a route for that. It will load the css if you add a route for that specific css file. However as Irshad said, the standard way to do this is to add a route for all the static files.

app.use(express.static("public"))

Right now, you are only sending home.html everytim the root is requested.

Change your code to read the requested file from the req and serve that file whatever it may be.

Answer 2

Why not set the middleware to serve static files (css, html) from public folder app.use(express.static("public"))

See the working example