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

Question

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

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 之间的关系。

Answer 2

link(rel='stylesheet', href='../static/style.css', type='text/css' )

/发生这种情况可能是哈巴狗版本的原因，所以使用上面的代码，这绝对会解决你的问题；）/

Answer 3

我在使用 Harry 完整的 Web 开发训练营视频进行代码练习时也面临同样的问题。 79