css - express css 仅显示在索引页面上

Question

出于某种原因，我的网络应用程序仅在索引文件上加载 css，即使是静态的 body 和 html 元素也仅在 index.handlebars 页面上设置样式。我试过更改 css 位置、href 链接等，但没有任何效果。所以我的 app.js 文件看起来像这样

const express = require('express');
//Other Consts
const path = require('path');

const app = express();
// Load Routes
const tasks = require('./routes/tasks');
const users = require('./routes/users');
const points = require('./routes/points')


// Public folder path
app.use(express.static(path.join(__dirname, 'public')));


//Index Route
app.get('/', (req, res) => {
    res.render('index')
});
//About Route
app.get('/about', (req, res) => {
    res.render('about')
});

// Use routes
app.use('/tasks', tasks);
app.use('/users', users);
app.use('/points', points);

const port = 4000;
app.listen(port,'0.0.0.0', function(){
    console.log(`Server started on ${port}`);
});

文件树:

-public
  -css
     -main.css
  -img
-views
  -layouts
    -main.handlebars <- css shows
  -users
    -login.handlebars <- css doesnt shows
    -register.handlebars <- css doesnt show
  -tasks
    -index.handlebars <- css shows
    -add.handlebars <- css doesnt show
    -edit.handlebars <- css doesnt show
  -users
    -index.handlebars <- css shows
    -add.handlebars <- css doesnt show
    -edit.handlebars <- css doesnt show
-routes
  -tasks.js
  -routes.js
  -users.js
-app.js

头部链接是:

<link rel="stylesheet" href="css/main.css">

Answer 1

如果您位于/users 等子路径中，那么它将尝试在/users/css/main.css 中查找 css

在您的 CSS 路径前添加一个“/”，以始终从基本路径引用您的样式表。

<link rel="stylesheet" href="/css/main.css">