为什么样式在我的 Express 应用程序中不起作用？

Question

样式在这条路线中不起作用：'http://localhost:5000/exams/add-new'

但它正在与其他路线一起使用，例如：

'http://localhost:5000'
'http://localhost:5000/exams'
'http://localhost:5000/about'

我的 CSS 文件在资产文件夹中： assets/css/styles.css

这是 server.js 文件：

const express = require('express')
const path = require('path')
const app = express()

app.set('view engine', 'ejs')

app.use('/css', express.static(path.resolve(__dirname, 'assets/css')))

app.use('/', require('./server/routes/router'))

app.listen(5000)

以及 views 文件夹中的 index.ejs 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Home Page</title>
  </head>
  <body>
    <!--Header-->
    <header>
      <div>
        <nav>
          <h1 class="logo">
            <a href="/">B<span>log</span></a>
          </h1>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/exams">Exams</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!--/Header-->
    <br />

    <!-- Main Section -->
    <main>
     <h1>Home Page</h1>
    </main>
    <!-- Main Section -->
  </body>
</html>

这是考试页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Home Page</title>
  </head>
  <body>
    <!--Header-->
    <header>
      <div>
        <nav>
          <h1 class="logo">
            <a href="/">B<span>log</span></a>
          </h1>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/exams">Exams</a></li>
            <li><a href="/">About</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!--/Header-->
    <br />

    <!-- Main Section -->
    <main>
      <!-- Add New Question Button -->
      <div class="addNewQuestionsButton">
        <a href="/exams/add-new-questions">
          <span>Add new questions</span>
        </a>
      </div>
      <!-- Add New Question Button -->
    </main>
    <!-- Main Section -->
  </body>
</html>

为什么会这样，解决方法是什么？

Answer 1

在您的输出 HTML 中，确保 CSS 是从路径加载的：

<link rel="stylesheet" href="/css/styles.css" />

而不是

<link rel="stylesheet" href="css/styles.css" />

尽管您当前 URL

的 route，这将带来一致性

Answer 2

在Html中添加css的确切路径：

assets/css/styles.css

为什么样式在我的 Express 应用程序中不起作用？

Why the styling is not working in my express app?

css

ejs

node.js

express