pug模板中的外部样式表将不会加载

Question

我无法弄清楚如何将样式表加载到哈巴狗中。我尝试过每一种我能想到的方式。并在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中的link元素

    //- 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文件的来源时。浏览器显示链接已在父级内正确呈现。

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

style.
    selector{
        rule
        rule
}

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

规格：

• Firefox 56.0
• Ubuntu 16.04
• pug 2.0
• express 4.16.2

Answer 1

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

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

然后在pug文件中添加

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

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

html
    head
        style
             include ./style.css
    body