为什么我的 CSS 在 if 语句内呈现的 EJS 文件中不起作用

Question

我正在尝试将 CSS 应用到此 EJS 文件，但无论我应用哪种样式，都没有任何效果。这是代码示例：

itemEdit.ejs

<%- include("partials/header.ejs", {title: ` - Items`, body_id: `items`} )%>
<%- include("partials/navbar.ejs", {bg: `dark`})%>

<div class="edit-container">
    <div class="row">
        <h1>Edit item</h1>
        <a href="/items">
            <<<-Back to items page</a>

    <form action="/itemEdit/item-edit/<%= item._id%>" method="post">
        <input type="text" name="name" placeholder="enter item name">
        <input type="text" name="description" placeholder="enter item description">
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
</div>

<%- include("partials/footer.ejs")%>

index.ejs

app.get('/itemEdit/:id', isLoggedIn, (req, res) => {
    // Query for session user object
    User.findById({ _id: req.user._id },
        (err, doc) => {
            if (err) { console.log(err); }
            else {
                const { userInventory } = doc

                for (let i = 0; i < userInventory.length; i++) {
                    if (userInventory[i]._id == req.params.id) {
                        res.render('itemEdit.ejs', {
                            item: userInventory[i], // Item object
                            user: doc // Session user object
                        })
                    }
                }
            }
        })
})

这是我添加到 CSS 以测试它是否正常工作的内容。

style.css

.edit-container {
    background-color: red;
}

即使我添加了红色背景，它也没有显示那种样式。 CSS 是从 header.ejs 文件加载的，我可以确认它适用于除此文件之外的所有其他 EJS 文件。可能是因为我把它放在 IF 语句中，这就是为什么 CSS 不适用，甚至 FOOTER 也不能正确显示，即使它适用于所有其他 EJS 页面。

感谢任何帮助！

更新

在控制台中试用后，我注意到该应用程序将 itemEdit.ejs 文件视为一个文件夹。看截图： console。这是什么原因？我从来没有把它做成一个文件夹，它只是一个简单的EJS文件。

Answer 1

您是否尝试过这种格式：href='/stylesheets/style.css'？没有 '/' 它将查找相对路径，这将成为

'/itemEdit/stylesheet/style.css'

您还可以通过打开调试 window 并转到 'network' 面板来检查所请求文件的路径，然后执行 F5 重新加载页面，然后您'将看到正在加载的所有文件

此时您可以单击特定文件（在本例中为 style.css）并检查浏览器用于获取文件的完整路径

Answer 2

如果添加为依赖项，您可以使用 express 轻松完成此操作。

$npm 安装 express

在您的项目文件夹中创建一个名为“public”的文件夹。在 public 文件夹中，您可以创建 css 文件夹。

然后在你的 index.ejs:

const express = require("express");

const app = express();

app.use(express.static("public"));

基本上授予 EJS 权限以加载 public 文件夹中的静态文件，不再需要内部 css。

Answer 3

我遇到了同样的问题，我将其缩小到头部分文件<link rel="stylesheet" href="css/styles.css">中的这一行代码。我的 css 也在 public 文件夹中，所以应该没有问题。

在 css 文件夹前添加一个 /，如下所示： <link rel="stylesheet" href="/css/styles.css">

在不破坏其余代码的情况下修复了它。我不知道那是什么，我想我还有更多的阅读要做。希望这有帮助

为什么我的 CSS 在 if 语句内呈现的 EJS 文件中不起作用

Why does my CSS not work in an EJS file rendered inside an if statement

html

css

ejs

node.js