将 CSS 添加到 EJS

Wil*_*een 1 javascript ejs node.js express

使用 EJS 时链接 css 文件时遇到困难。已经研究过其他答案,但无法弄清楚这是我用作 css 文件参考的代码。

埃杰斯

    <html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title></title>
  </head>
  <body>
    <header>
      <% include header %>
    </header>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

css 文件与 ejs 文件位于同一目录(views 目录)中。这会导致任何问题吗?标头只是另一个带有一些静态 html 的 ejs 文件。

服务器:

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

app.set("views", path.resolve(__dirname, "views"));
app.set("view engine", "ejs");


app.use(express.static(__dirname + 'public'));

app.get('/', (req, res) => {
  res.render("index");
})

app.listen(3000);
Run Code Online (Sandbox Code Playgroud)

我最终想将我的 css 文件移动到另一个文件夹中,但我真的想知道为什么这不起作用。由于这些文件位于同一文件夹中,我希望相对路径<link rel="stylesheet" href="index.css">能够工作。

Ark*_*one 5

您指定静态文件(css、图像等)位于文件夹“public”中:

app.use(express.static(__dirname + 'public'));
Run Code Online (Sandbox Code Playgroud)

阅读: http: //expressjs.com/en/starter/static-files.html

只需将您的 css 移至此文件夹即可;)

编辑 :

您可以指定多个静态文件夹:

app.use("/public1", express.static(__dirname + "/public1"));
app.use("/public2", express.static(__dirname + "/public2"));
Run Code Online (Sandbox Code Playgroud)

但您可以在静态文件夹中添加文件夹:

  • /public1/css
  • /public1/lib

并在您的 ejs 文件中使用它:

<link rel="stylesheet" href="/public1/css/index.css">
Run Code Online (Sandbox Code Playgroud)