CSS未链接到Ejs文件答案

【问题标题】：Express.js, CSS not linking to Ejs fileCSS未链接到Ejs文件
【发布时间】：2022-02-16 15:55:26
【问题描述】：

我相信这是将 css 链接到 ejs 文件的正确方法，但它仍然无法正常工作。您可以在提供的图片中看到我所有的文件夹是如何排列的。

【问题讨论】：

请不要在图片中发布代码。将代码作为文本发布。发布文本至少有十几个充分的理由（搜索索引、复制/粘贴到答案中、视障者访问等......）。
我认为问题出在../public。 .. 意味着在您的应用程序文件夹之外向上移动一个目录。例如，如果您的 server.js 位于 /blah/myapp/server.js 中，则 ../public 指向 /blah/public。所以使用public 没有../ 应该没问题。

【解决方案1】：

您的问题不在于 Ejs 文件中的链接标记。问题在于在 server.js 文件中定义文件的路径

解决方案是在 express 'use' 中间件中使用静态方法，如下所示：

app.use(express.static(__dirname + '/public'));

这意味着您要告诉 express 在哪里查找和提供静态文件。

为了链接css文件，你所要做的就是在你的Ejs文件中添加一个链接标签，如下所示：

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

【讨论】：

【解决方案2】：

在您的server.js 文件中，使用这一行而不是您拥有的那一行：

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

上面的行告诉express 在哪里可以找到公共资产。有了这个，每次你在ejs文件中写/，你就已经在公共文件夹中了。

例如，您将像这样链接您的 css 文件（我假设您的 css 样式在 public/css/styles.css 内）：

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

【讨论】：