pugjs 未加载 css

Question

我无法让我的 dashboard.pug 文件加载 dashboard.css 但它加载 dashboard.js。两者都在与 dashboard.pug

相同的文件夹中

我已经为 public 文件夹正确使用了 app use express static。

const publicpath=path.join(__dirname,'../public');

app.use(express.static(publicpath));

dashboard.pug-

doctype html
html
    head
        title Dashboard
        script(src='/views/dashboard/dashboard.js')
        link(rel='stylesheet', href='/views/dashboard/dashboard.css')
    body
        div .navbar
            div .navleft
                p Your notes
            div .navright
                div .dropdown
                    p Account &#9660;
                div .dropdowncontent
                    p Settings
                    p Logout

dashboard.js 加载成功

dashboard.css 未加载

folder structure
-public
 -views
  -dashboard
   -dashboard.css
   -dashboard.js
   -dashboard.pug
-server
 -server.js

没有错误

Answer 1

我使用快速应用程序生成器设置了一个与您的应用程序非常相似的应用程序。目录结构（未显示 node_modules）如下所示：

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

注意index.pug文件在/views中（index.pug相当于你的dashboard.pug).

index.pug:

    html
      head
        title Dashboard
        script(src='/views/dashboard/dashboard.js')
        link(rel='stylesheet', href='/views/dashboard/dashboard.css')
      body
      p Hi!

在 app.js 中，快速应用程序生成器在行中输入：

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

当我查看在浏览器中呈现的 index.pug 页面时，我放入 /public/views/dashboard 的简单 css 和 js 文件起作用了。

希望对您有所帮助。

Answer 2

问题是 class 姓名和 div 之间的差距。它以某种方式显示没有错误，并使用 class 呈现 HTML divs，但那些 classes 没有调用 CSS。我删除了这样的空白

div .classname -> div.classname

它解决了问题。

pugjs 未加载 css

pugjs not loading css

css

node.js

pug