无法在 node/express/pug 应用程序中获取 css

Question

我正在使用 Express 和 Pug（以前的 Jade）创建我的第一个 Node 应用程序。 一切正常，除了让我的 css 文件在浏览器上运行。 （错误 404：GET http://localhost:3000/css/syles.css）

项目结构：

server.js
views
    bag.pug
public
    css
      styles.css

我的服务器js文件：

const pug = require('pug');
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

const inv = require('./api/pogoni/inventory');

// Set views path
app.set('views', path.join(__dirname, 'views'));
// Set public path
app.use(express.static(path.join(__dirname, 'public')));
// Set pug as view engine
app.set('view engine', 'pug');

// Player's index
app.get('/player', (req, res) => {
    res.render('player', {
        title: 'PLAYER Dashboard'
    });
});

// Player's bag
app.get('/bag', (req, res) => {
    inv.getInventory()
        .then((inventory) => {
            if(!inventory) {
                throw new Error('Unable to fetch inventory.');
            }
            res.render('bag', {
                title: 'PLAYER bag',
                inventory
            });
        })
        .catch((e) => {
            res.status(500, {
              error: e
            });
        });
});

// Start server
app.listen(port, () => {
    console.log(`Server is up on port ${port}`);
});

包.pug

doctype html
html
    head
        meta(charset='UTF-8')
        title #{title}
        link(rel='stylesheet', href='/css/syles.css')

Answer 1

你有一个错字：syles 而不是样式

doctype html
html
    head
        meta(charset='UTF-8')
        title #{title}
        link(rel='stylesheet', href='/css/styles.css')