如何让jade加载css文件？ （这是行不通的）

Question

这是我的目录

enter image description here

newTab.jade代码

doctype html
html
    head
        title New Tab
        link(rel = 'stylesheet', type = 'text/css', href = '/public/index.css')
    body
        p hello world

index.css代码

p{
    background-color: black;
    color: white;
}

app.js代码

const express = require('express');
const app = express();
const port = 3000;
app.locals.pretty = true;
app.listen(port, function(){
    console.log("Server Connected port: "+port);
});

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

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

jade 文件无法加载 css 文件。 我试过 href = "/public/index.css" 但它也不起作用。

Answer 1

建议

尝试

doctype html
html
    head
        title New Tab
         include index.css
    body
        p hello world

在您的 newTab.jade 文件上

并在视图目录中包含 index.css

Answer 2

向 Express 附加一个中间件以提供静态文件。

在您的 app.js 文件中：

// require path module to join your public folder with __dirname
const path = require('path');

//...

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

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

express.static可以做的事情更多。例如。设置 maxAge 用于缓存目的：

// 31557600000ms = 1 year
app.use('/', express.static(path.join(__dirname, 'public'), { maxAge: 31557600000 }));