css - node.js 不会在所有页面加载 css 样式

Question

我正在从头开始写一个简单的博客来学习node.js + Express。不过，我遇到了一个问题，当我尝试访问嵌套的目录时，样式将无法加载。例如:

app.get('/posts/new', (req, res) => {
  res.render('create')
});

不会使用样式，但只需使用“/posts”即可。

知道是什么原因造成的吗？完整代码如下:

const path = require('path');
const expressEdge = require('express-edge');
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = new express();

mongoose.connect('mongodb://localhost:27017/node-blog', {
    useNewUrlParser: true
})
  .then(() => 'You are now connected to Mongo!')
  .catch(err => console.error('Something went wrong', err))

app.use(express.static('public'));
app.use(expressEdge);
app.set('views', __dirname + '/views');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: true
}));

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

app.get('/posts/new', (req, res) => {
  res.render('create')
});

app.post('/posts/store', (req, res) => {
  console.log(req.body)
  res.redirect('/')
});
app.listen(4000)

这是目录结构:

└── node-blog
    ├── database
    ├── node_modules
    ├── public
        ├── css
        ├── img
        ├── vendor
        ├── js
    ├── theme
    └── views
        ├── layouts

所有相关样式都是公共(public)的，模板引擎文件位于 View 中。

Answer 1

您可以通过创建虚拟路径来加载静态资源，例如
app.use('/assets',express.static(__dirname + '/public/css'));其中 public 是存储所有资源的目录，其中 css 是存储所有 css 文件的文件夹，您可以在链接标签中指定虚拟路径，用于加载 css 的 href 属性，例如:如果您有模板文件，则在其中写入链接标签 <link rel="stylesheet" type="text/css" href="/assets/create.css">我尝试过使用与您相同的目录结构，并尝试模拟该错误并修复CSS加载问题，您可以引用https://github.com/ardnahcivar/Node.js-Code-/tree/master/11-17-18代码