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;
}

我在根目录中创建了一个公用文件夹，然后是一个views文件夹。在views文件夹中是保存index.jade文件的位置，在views文件夹内的另一个文件夹内，称为stylesheets文件夹是保存CSS文件的位置。但是，每次我尝试运行我的应用程序时，都无法加载CSS文件。为什么会这样？

Answer 1

如果存在，请将此行放在layout.jade文件中 link(rel='stylesheet', href='/stylesheets/style.css')

并在layout.jade文件中导入HTML，并在页面顶部显示此行extends layout

此处layout.jade文件..

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

Answer 2

我认为这将为时已晚。我遇到了同样的问题，并且能够使用style来解决。

doctype html
html
  head
    title= title
    style
        include ../stylesheets/style.css
  body
    block content

如何链接CSS和Jade？

2 个答案: