javascript - 哈巴狗模板中的外部样式表将不会加载(external style sheet in pug template will not load)

Question

I am unable to figure out how to get a style sheet to load in pug.

(我无法弄清楚如何在帕格中加载样式表。)

I have tried every which way I can think of.

(我已经尝试过我能想到的所有方法。)

and have searched extensively on Google.

(并在Google上进行了广泛的搜索。)

This seems like such a silly problem, but I have already wasted so much time trying to figure it out.

(这似乎是一个愚蠢的问题，但是我已经浪费了很多时间试图解决它。)

My file structure is as follows

(我的文件结构如下)

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

In all of the following examples I have tried to reference the file in these ways:

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

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

and

(和)

• href="/style.css"

I have tried:

(我试过了：)

---

1) link element in main.pug

(1）main.pug中的链接元素)

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

---

2) In the layout.pug using include

(2）在layout.pug中使用include)

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

AS WELL AS inside the header

(标头内的AS WELL AS)

---

3) In layout.pug using

(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

---

Inspect Source

(检查源)

When I inspect the source of the pug files that contain the pug element.

(当我检查包含pug元素的pug文件的来源时。)

the browser shows that the link has been rendered correctly inside the parent.

(浏览器显示链接已在父级内部正确呈现。)

css does load when I write it directly in the pug file like so:

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

style.
    selector{
        rule
        rule
}

---

I can not keep my css inline, and I can not use html directly in the pug file (assignment rules).

(我无法保持CSS内联，也不能直接在pug文件中使用html（分配规则）。)

Why are my stylesheets not loading?

(为什么我的样式表无法加载？)

---

Specs:

(眼镜：)

• Firefox 56.0

  (Firefox 56.0)

• Ubuntu 16.04

  (Ubuntu 16.04)

• pug 2.0

  (哈巴狗2.0)

• express 4.16.2

  (快递4.16.2)

  ask by Riley Hughes translate from so

Answer 1

Check if you have set public folder as static inside of server.js

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

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

then in pug files add

(然后在哈巴狗文件中添加)

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