javascript - 哈巴狗模板中的外部样式表将不会加载

Question

我无法弄清楚如何在 pug 中加载样式表。我已经尝试了所有我能想到的方法。并在 Google 上进行了广泛搜索。这似乎是一个愚蠢的问题，但我已经浪费了很多时间试图弄清楚它。

我的文件结构如下

/main
    server.js
    package.json
    /views
        layout.pug
        main.pug
    /public
        style.css

在以下所有示例中，我都尝试通过以下方式引用该文件：

• href="../public/style.css"
• href="./public/style.css"
• href="/public/style.css"
• href="public/style.css"

和

• href="/style.css"

我努力了：

---

1) main.pug 中的链接元素

    //- daytime page
    extends layout.pug
    block styles
        link(rel="stylesheet" type="text/css" href="../public/style.css")

---

2）在 layout.pug中使用include

//- layout
doctype
html
  head
    meta(charset='UTF-8')
    block title
      title country
    block styles
  body
    style.
      include ../public/day.css

以及在标题内

---

3）在 layout.pug 中使用

//- layout
doctype
html
  head
    meta(charset='UTF-8')
    block title
      title country
    block styles
      link(rel="stylesheet" type="text/css" href="../public/style.css")
body

---

检查源

当我检查包含 pug 元素的 pug 文件的来源时。浏览器显示链接已在父级中正确呈现。

当我直接在 pug 文件中写入 css 时，它确实会加载，如下所示：

style.
    selector{
        rule
        rule
}

---

我不能保持我的 css 内联，也不能直接在 pug 文件中使用 html（分配规则）。为什么我的样式表没有加载？

---

眼镜：

• 火狐 56.0
• Ubuntu 16.04
• 哈巴狗 2.0
• 表达 4.16.2

Answer 1

检查您是否在 server.js 中将公用文件夹设置为静态

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

然后在哈巴狗文件中添加

head
block styles
  link(rel="stylesheet" type="text/css" href="/style.css")

Answer 2

style
     include css.css

它对我有用，希望对您有所帮助，请在此处阅读https://pugjs.org/language/includes.html

Answer 3

对于 pub 版本 2.* 及更高版本，请使用以下代码，

html
    head
        style
             include ./style.css
    body