玉器中的链接CSS文件无法加载

Question

This is what my directory structure looks like

--votingApp
    app.js
    node_modules
    public
      css
        mystyle.css
    views
      test.jade
      mixins.jade

I have written some general purpose blocks in mixins.jade. test.jade is the main file.'biolerplate','nav','nav item' are different blocks in mixins. This is what test.jade looks like

include mixins
doctype html 
html(lang="en")
    head
        +boilerplate
        link(rel="stylesheet",type="text/css",href="../public/css/mystyle.css")
    body
        +nav("Voting app","navigation_menu")
            +nav_item("#","active") Home
            +nav_item("#") Signup
            +nav_item("#") Login

And this is my app.js file

var express=require('express');
var path=require('path');
var app=express();
app.use(express.static(path.join(__dirname,'public')));
app.set('views','./views');
app.set('view engine','jade');
app.get('/',function(req,res){
    res.render('test.jade');
});
app.listen(8000);

The problem is that the mystyle.css is not being loaded.The network option in the developer console of mozilla is showing that error 404 for the request for mystyle.css(request url- http://localhost:8000/public/css/mystyle.css ) What should I do please help?Thanks for reading.

Answer 1

You don't need the relative path when loading your css, that's why you've defined your public directory as a static resource .

Update your link line to this:

link(rel="stylesheet",type="text/css",href="/public/css/mystyle.css")

Answer 2

只需使用：

link(rel="stylesheet",type="text/css",href="/css/mystyle.css")

Answer 3

Relative path is never work with node.js so make it absolute like

link(rel="stylesheet",type="text/css",href="css/mystyle.css")

and you set your directory as public folder using following line

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

so discard writing public css in path.