Почему html-страница, отправленная по маршруту express.js, не связана с таблицей стилей CSS?

Question

Итак, у меня есть файл server.js, который импортирует маршрутизатор

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')); 

Маршрутизатор выглядит следующим образом

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;

Он работает!Он отображает html-страницы, однако эти html-страницы имеют таблицы стилей css, подключенные к ним и расположенные в том же каталоге, но они отображаются как пустые html-листы (без стилей) ... Как сделать так, чтобы они отображались с учетом таблиц стилей css?

Answer 1

Когда браузер обнаруживает ссылку на стиль загруженного html-файла, он пытается загрузить файл, указанный в атрибуте src. Теперь у вашего серверного скрипта нет маршрута для этого. Он загрузит CSS, если вы добавите маршрут для этого конкретного файла CSS. Однако, как сказал Иршад, стандартный способ сделать это - добавить маршрут для всех статических файлов.

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

Сейчас вы отправляете только home.html каждый раз, когда запрашивается рут.

Измените свой код, чтобы прочитать запрошенный файл из req и обработать этот файл, каким бы он ни был.

Answer 2

Почему бы не настроить промежуточное ПО для обслуживания статических файлов (css, html) из общей папки app.use(express.static("public"))

См. Рабочий пример