Question

我无法获取我的dashboard.pug文件来加载dashboard.css，但它会加载dashboard.js。两者都与dashboard.pug位于同一文件夹

我已经使用了app use来正确地为公共文件夹表达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

我使用Express Application Generator设置了一个与您非常相似的应用程序。目录结构（未显示 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')));

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

希望这会有所帮助。

Answer 2

问题出在类名和div之间。它以某种方式没有显示任何错误，并使用一个类渲染了HTML div，但这些类未调用CSS。我消除了这样的差距

div .classname -> div.classname

它解决了这个问题。

pugjs不加载css

2 个答案: