Node.js Pug - CSS 不会在一个特定页面上加载答案

【问题标题】：Node.js Pug - CSS won't load on one specific pageNode.js Pug - CSS 不会在一个特定页面上加载
【发布时间】：2017-04-23 07:56:36
【问题描述】：

我正在使用 express 和 pug 作为视图/模板 eingine 构建我的第一个 node.js 应用程序。我在 atm 遇到的问题如下：

问题：在其他路由和 template.pugs 上加载相同的 CSS 文件，但不会在一个特定的路由/模板上加载。收到 404 错误。

我的 server.js：

var express = require('express');   
var path = require('path');
var app = express();

var bodyParser = require("body-parser");

app.set('views', './templates');
app.set('view engine', 'pug');

app.use(express.static(path.join(__dirname, './public')));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

require('./router')(app);

var listener = app.listen(process.env.PORT, function() {
  console.log('Server is live on PORT : ' + listener.address().port);
});

我的 router.js（css 加载用于“/”和“/events”，而不用于 /events/new”）：

var controller = require ('./controller');

module.exports = function (app) {

//start
app.get('/', controller.index);

// All Events View
app.get('/events', controller.show_events);
app.get('/events/new', controller.new_event_form);

};

我的 controller.js（“index”和“show_events”的 CSS 加载，而不是“new_event_form”）

module.exports = {
 index: index,
 show_events: show_events,
 new_event_form: new_event_form
};

function index (req, res) {
  res.render('index');
}

function show_events(req, res) {
  res.render('show_events'); 
};

function new_event_form(req, res) {
  res.render('new_event_form');
};

现在是奇怪的部分。对于此模板“show_events.pug”，它会加载 css 文件。路线：/事件

doctype

html
  head
    title Database
    link(rel='stylesheet', href='./css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
  body
    div#wrapper
      header
        h1 Database: Events
      menu
        a(href='/')
          h2 Back
        a(href='/events/new')
          h2 Create New Event

但是对于这个模板“new_event_form.pug”，它不会加载 css 文件。路线：/events/new

doctype

html
  head
    title Database
    link(rel='stylesheet', href='./css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
  body
    div#wrapper
      header
        h1 Event: New
      menu
        a(href='/events')
         h2 Cancel

Css 也可以完美加载索引“/”路由。

目前的文件夹/文件结构

 controller.js
 router.js
 server.js
 public
 - - css
 - - - - main.css
 templates
 - - index.pug
 - - show_events.pug
 - - new_event_form.pug

到目前为止，请找出任何错误，不明白为什么它在 index 路由和 show_events 路由上加载，但在 new_event_form 路由上没有加载。

感谢任何提示或解决方案！

更新在比较路线时，我注意到一些不同之处： - 对于https://terminal.glitch.me/events，css 文件的请求地址是https://terminal.glitch.me/css/main.css - https://terminal.glitch.me/events/newcss 的请求地址文件是https://terminal.glitch.me/events/css/main.css

【问题讨论】：

标签： node.js express pug

【解决方案1】：

这么简单：

在事件/新路由的 pug 文件中，链接 ref 应包含 /css/main.css 前 2 个点，而不是 1 个

所以我改变了这个

link(rel='stylesheet', href='./css/main.css')

到这里

link(rel='stylesheet', href='../css/main.css')

现在可以了

我只是不清楚如何将../ 这种类型的东西用于绝对路径......

【讨论】：