javascript - Can't get css in nodeexpresspug app

I'm creating my first Node app using Express and Pug (former Jade). Everything is working fine, except getting my css files running on the browser. (Error 404: GET http://localhost:3000/css/syles.css)

Project structure:

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

My server js file:

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')

Project structure:

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

My server js file:

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')

Share Improve this question asked Dec 9, 2016 at 1:03 nip 1,7071 gold badge12 silver badges21 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

You have a typo: syles instead styles

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Can't get css in nodeexpresspug app - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)