无法在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}`);
});

bag.pug

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

Answer 1

你有一个错字： syles 而不是 styles

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