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代替样式

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

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

1 个答案: