如何在 pugjs 模板中包含 css 文件答案

【问题标题】：How to include a css file in pugjs template如何在 pugjs 模板中包含 css 文件
【发布时间】：2017-10-20 13:38:08
【问题描述】：

我正在为我的项目使用 pugjs。我无法在 pug 模板中加载 css 文件。我正在使用以下代码

index.pug

link(rel="stylesheet", href="views/styles/products.css", type="text/css")

This is my project structure

【问题讨论】：

语法正确，确保路径正确。
Mr.Paul 能否请您验证我的项目结构并告诉它是对还是错
我认为您不会告诉您的 node.js 应用程序文件夹 /views 提供“静态”文件。我建议你添加一个文件夹/public，把你所有的静态文件放在这里，并在你的 server.js 中告诉这个文件夹提供静态文件。

标签： node.js pug templating templating-engine pugjs

【解决方案1】：

Express 不会提供未经您许可的任何内容。您必须使用 express.static 中间件授予权限。

将您的静态文件放在一个文件夹中，然后像这样使用 express.static 中间件-

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

【讨论】：

【解决方案2】：

我的目录设置如下所示：

    .
├── app.js
├── bin
│   └── www
├── package.json
├── package-lock.json
├── public
│   ├── images
│   ├── css
│   │   └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug

而在 index.pug 中，我们必须使用：

 html
      head
        title=homepage
        link(rel='stylesheet', href='/views/dashboard/dashboard.css')
      body

并在 app.js 中添加这行代码：

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

【讨论】：