将CSS添加到EJS
[英]Adding CSS to EJS
问题描述
使用EJS时，在链接我的CSS文件时遇到困难。 已经研究了其他答案，但无法弄清楚这是我在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目录相同的目录中。 这会引起任何问题吗？ 标头只是另一个带有静态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">可以工作。
2 个解决方案
解决方案1
2 已采纳 2017-10-01 16:47:26
您指定了静态文件（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">
解决方案2
1 2017-10-01 16:52:30
它不起作用的原因仅仅是因为实际上未提供包含.ejs文件的文件夹。 渲染视图时，express将在服务器上本地定位.ejs文件并读取其内容，但不会通过HTTP连接使它可用。
您可以通过尝试直接通过浏览器访问.ejs文件来验证这一点。
添加css来表达项目和ejs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.