pugjs没有加载css答案

【问题标题】：pugjs not loading csspugjs没有加载css
【发布时间】：2019-06-16 09:29:42
【问题描述】：

我无法让我的dashboard.pug 文件加载dashboard.css，但它加载了dashboard.js。两者都与dashboard.pug在同一个文件夹中

我已经为公共文件夹正确使用了应用程序使用 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

没有错误

【问题讨论】：

我使用“public”而不是“../public”。我会尝试测试你的代码，看看这是否相关。
@user3425506 我使用'../public'，因为它在服务器文件夹之外
我刚刚看到了！为什么不将 pug 文件放在 /views 中（即应用程序根目录下的目录）？这就是快速应用程序生成器的设置方式。
@user3425506 你的意思是把文件放在仪表板外面？我刚才试了，还是一样的问题
在应用的根目录下创建一个views目录，并将pug文件放入其中。然后只需使用“公共”。我刚刚在 /public/views/dashboard 中使用了 dashboard.js 和 dashboard.css。

标签： css node.js pug

【解决方案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 文件有效。

希望这会有所帮助。

【讨论】：

还有一件事。我想知道在/public 中有一个views 目录是否是一个好主意。如您所见，快速应用程序生成器在公共内部创建了一个 javascript 和一个样式表目录来放置这些文件。

【解决方案2】：

问题是类名和 div 之间的差距。不知何故，它没有显示错误并使用类呈现 HTML div，但这些类没有调用 CSS。我删除了这样的差距

div .classname -> div.classname

它解决了这个问题。

【讨论】：