CSS在哈巴狗中显示为键入的文本

Question

我正在做一个网络开发课程，我们正在使用 pug/express 制作这个项目，一切都运行良好，然后过了一段时间，CSS 代码开始显示为文本，即使在开发人员工具中它也显示 #样式标签下的文本。代码和一切都是正确的，当我将它与 HTML 文件附加并上线时（VS CODE 扩展名）也会显示 CSS，但是当我使用 nodemon 使用 pug/express 运行它时它只显示为文本。 这是照片。 enter image description here

javaScript 代码

const express = require("express");
const path = require("path");
const app = express();
const port = 8000;
    
// EXPRESS SPECIFIC STUFF
app.use('../static', express.static('static')) // For serving static files
app.use(express.urlencoded()) 
    
// PUG SPECIFIC STUFF
app.set('view engine', 'pug') // Set the template engine as pug
app.set('views', path.join(__dirname, 'views')) // Set the views directory
   
// ENDPOINTS
app.get('/', (req, res) => {
  const params = {}
  res.status(200).render('index.pug', params);
})
    
// START THE SERVER
app.listen(port, () => {
  console.log(`The application started successfully on port ${port}`);
});

哈巴狗代码

//- index.pug
    doctype html
    html
      head
        styles
           include ../static/style.css
      body
        nav#navbar
         ul 
          li #[a(href="/") Home] 
          li #[a(href="/") About]
          li #[a(href="/") Servives] 
          li #[a(href="/") Class info] 
          li #[a(href="/") Contact Us]  
      
      section#introsection 
        div  Welcome to the best Dance Academy in Delhi 
        div  Eat Sleep Dance Repeat 
      section#missonsection 
        h2 Our Mission
        div.card
            h3 Dance Perfection
        div.card
            h3 Dance the way you like    
        div.card
            h3 Dance bla bla    
      section#sponsorssection 
        h2 Our Sponsors     
      footer#footer 
        | our footer here 
        script
          include ../static/index.js

CSS 代码

@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Roboto+Slab:wght@100&display=swap'); 
    
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 
    
/* Navigation bar  */
#navbar{
  font-family: 'Comforter Brush', cursive;
  background-color: rgb(218, 84, 84);
  padding: 18px 14px ;
}

#navbar ul{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#navbar li{
  list-style: none;
}

#navbar li a{
  font-weight: bold;
  color: white; 
  text-decoration: none;
  padding: 13px 30px;
}

#navbar li a:hover{
  color: black;
}
    
/* Intro Section */
#introsection{
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;   
  align-items: center;
  height: 425px;
  background-color: red;
  background:url("/static/bg.jpg") center/cover  no-repeat;
}
    
/* Misson Section */
#missionsection{
  margin: auto;
  display: block;
  height: 300px;
  width: 67%;
  background-color: rgb(44, 44, 30);
}
    
.card{
  display: inline-block;
  border: 2px solid bloack;
  border-radius: 10px;
  width: 30%;
  margin: 23px 20px;
  height: 210px;
}
    
.card h3{
  text-align: center;
  margin: 12px;
}
    
/* Sponsor section */
#sponsorssection{
  height: 300px;
  background-color: rgb(163, 163, 160);
}

#sponsorssection h2{
  text-align: center;
  padding-top: 12px ;
}
    
/* footer */
#footer{
  height: 100px;
  background-color: black;
}

Answer 1

如果您的 css 已经在文件 ../static/styles.css 中，其中 ../static 是为静态文件映射的文件夹，因此该文件是公开可用的，您可以改用 <link>：

doctype html
html
  head
    link(rel="stylesheet" href="/style.css")
  body
    blah blah blah

同样，如果您的脚本文件位于同一位置，您可以将其包含为：

script(src="/index.js")

如果您是 Pug 的新手，请在您的浏览器上查看源代码以检查生成的 Html 以了解 Pug 语法与实际 Html 之间的关系。