时间戳

首页 > 解决方案 > Express 静态目录不适用于 CSS 路径

javascript - Express 静态目录不适用于 CSS 路径

问题描述

我的 app.js 中有这个

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

..这是我的主要布局页面

<link rel="stylesheet" href="/css/styles.css">

我已经尝试了几乎所有我能想到的组合，但我无法连接样式表。

您可以在此处查看 repo 以了解文件层次结构 - https://github.com/NolWag/Shopify-eCommerce-App

在此处输入图像描述

我似乎无法弄清楚我错过了什么，非常感谢任何帮助。

标签： javascriptnode.jsexpress

解决方案

请使用
app.use(express.static(path.join(__dirname, './public')));
代替
app.use(express.static(path.join(__dirname, '../public')));

当然，serve static files 也有一些问题
如何使用 node、express 和 ejs 包含 css 文件？
但是，从你的项目来看，没有问题

有趣的故事：为什么我们找不到../public是错误的路径。

屏幕

使用 chrome inspect，我们可以认为存在一些 mime 类型错误。

???：虽然没有文件express.static，快递是发送消息为

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Error</title>
    </head>
    <body>
        <pre>Cannot GET /css/styles.css</pre>
    </body>
</html>

而不是404。

=> 所以，我们很困惑，我们无法检测到没有styles.css.

我们可以用 调试http://localhost:3000/css/styles.css，然后我们可以找到Cannot GET /css/styles.css. 所以，我们可以发现../public是错误的，并用./public.

推荐阅读