使用 EJS 时链接 css 文件时遇到困难。 已经研究过other answer但不明白 这是我在 css 文件中引用的代码。
EJS
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<header>
<% include header %>
</header>
</body>
</html>
css 文件与 ejs 文件位于同一目录(views 目录)中。这会导致任何问题吗？ header 只是另一个带有一些静态 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);
我最终想将我的 css 文件移动到另一个文件夹中，但我真的想知道为什么这不起作用。由于这些文件位于同一文件夹中，我期望相对路径 <link rel="stylesheet" href="index.css">去工作。
最佳答案
您指定静态文件(css、图像等)位于“public”文件夹中:
app.use(express.static(__dirname + 'public'));
阅读:http://expressjs.com/en/starter/static-files.html
只需将您的 css 移至此文件夹即可;)
编辑:
您可以指定多个静态文件夹:
app.use("/public1", express.static(__dirname + "/public1"));
app.use("/public2", express.static(__dirname + "/public2"));
但是您可以在静态文件夹中添加文件夹:
- /public1/css
- /public1/lib
并像在您的 ejs 文件中一样使用它:
<link rel="stylesheet" href="/public1/css/index.css">
关于javascript - 将 CSS 添加到 EJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46514564/