ノード/エクスプレス/パグアプリでCSSを取得できません

Question

私はExpressとPug（旧翡翠）を使って最初のノードアプリケーションを作成しています。 ブラウザで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')