Pug/Express 中的 CSS 链接不起作用答案

【问题标题】：Link to CSS in Pug/Express is not workingPug/Express 中的 CSS 链接不起作用
【发布时间】：2021-08-23 11:44:13
【问题描述】：

我的路径是这样的：

src
  index.ts
public
  css
    (css files)
views
  sections
    master.pug

在我的 index.ts 中有这段代码：app.use(express.static(path.join(__dirname, 'public')));

所以在我的 master.pug 中我写了这个，并认为它会起作用：link(rel='stylesheet', href='/css/style.css', type='text/css')

有人知道如何解决这个问题吗？我忽略了什么？任何帮助都会很棒！如果我在此处弹出某些内容之前找到一个修复程序，我将发布我的修复程序。 :)

【问题讨论】：

您希望为该链接标签提供服务的服务器上 css 文件的完整路径是什么？还有，__dirname 的完整路径是什么？我们需要知道这些才能提出正确的解决方案。要使您当前的代码正常工作，样式表需要位于 __dirname + '/public/css/style.css'。
Harshit Gupta 提供了一个可行的解决方案。 :) 感谢您的努力！
他们做了一个幸运的猜测，因为您的问题中没有足够的信息知道public 文件夹在哪里。显然它相对于当前工作目录，而不是模块目录，但我们无法知道它在哪里。因此，Harshit 答案中的代码使您的应用程序在启动时依赖于当前工作目录。
如果您查看express.static() source code，您会看到它采用您给它的任何路径并在其上调用path.resolve(yourpath) 来解析相对路径与当前工作目录，即无论您的应用程序启动时操作系统当前的工作目录是什么。通常，您不想依赖它。通常最好指定相对于模块或项目的路径。但是，您还没有告诉我们它相对于模块的位置，因此我们无法建议该代码是什么。
哦！我的坏你们，我的书面缩进不算数，我是新来的。现在修复:)

【解决方案1】：

尝试使用这个，app.use(express.static('public')); 这里的 public 是包含所有静态文件的文件夹名称，您的 public 文件夹应该在同一层次结构级别。

【讨论】：