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 文件。为什么会这样?
最佳答案
Put this line in
layout.jade
file if existslink(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
关于javascript - 如何链接 CSS 和 Jade?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39341388/