玉中链接的css文件未加载答案

【问题标题】：Linked css file in jade not loading玉中链接的css文件未加载
【发布时间】：2023-03-05 08:16:01
【问题描述】：

这就是我的目录结构的样子

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

我在 mixins.jade 中编写了一些通用块。 test.jade 是主文件。'biolerplate','nav','nav item' 是 mixins 中的不同块。这就是 test.jade 的样子

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

这是我的 app.js 文件

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

问题是 mystyle.css 没有被加载。mozilla 开发者控制台中的网络选项显示请求 mystyle.css 的错误 404(request url-http://localhost:8000/public/css/mystyle.css) 请问我该怎么办？感谢阅读。

【问题讨论】：

标签： javascript html css node.js express

【解决方案1】：

加载 css 时不需要相对路径，这就是为什么您将公共目录定义为 static resource。

将您的链接行更新为：

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

【讨论】：

谢谢。它起作用了。另外感谢您解释其背后的原因。

【解决方案2】：

只需使用这个：

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

【讨论】：

【解决方案3】：

相对路径永远不会与 node.js 一起使用，所以让它像绝对路径一样

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

然后您使用以下行将您的目录设置为公用文件夹

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

所以放弃在路径中写入公共 css。

【讨论】：