javascript - 如何链接 CSS 和 Jade？

Question

Server.js 文件代码如下

var express = require('express');

var app = express();

var PORT = 8080;

app.set('views', './public/views');

app.set('view engine', 'jade');

app.use(express.static(__dirname+'/public'));

app.get('/', function(req, res){
   res.render('index.jade'); 
});

app.listen(PORT, function(){
    console.log('Express listening on port: '+PORT);
});

下面提供的 Index.jade 文件

html
    head
        title Upload file for shortening
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        h1 Welcome to file metadata service
        div(id="submit-button")
            form(action = '/submit')
                button(type="submit", value='Submit')

下面提供的style.css文件

#submit-button{
    height:100px;
}

h1{
    font-family:Impact;
}

我在我的根目录中创建了一个 public 文件夹，然后是一个 views 文件夹。 views 文件夹内是保存 index.jade 文件的地方，views 文件夹内的另一个文件夹，称为 stylesheets 文件夹，是保存 CSS 文件的地方。

但是，每当我尝试运行我的应用程序时，它都无法加载 CSS 文件。为什么会这样？

Answer 1

Put this line in layout.jade file if exists link(rel='stylesheet', href='/stylesheets/style.css')

并在您的 HTML 文件中导入 layout.jade，并在页面顶部添加此行 extends layout

这里是 layout.jade 文件..

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content