无法让样式表与 node.js 的 ejs 一起使用
Posted
技术标签:
【中文标题】无法让样式表与 node.js 的 ejs 一起使用【英文标题】：Can't get stylesheet to work with ejs for node.js 【发布时间】：2012-11-09 07:48:02 【问题描述】：我正在尝试为模板制作一个带有 node、express 和 ejs 的简单服务器。我已经让服务器指向页面，加载它，甚至可以使用 include 语句生成其他代码。但是由于某种原因，样式表不会加载。
app.js
var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
fs = require('fs');
var PORT = 8080;
app.set('view engine', 'ejs');
app.get('/', function(req, res)
res.render('board.ejs',
title: "anything I want",
taco: "hello world",
something: "foo bar",
layout: false
);
);
app.listen(PORT);
console.log("Server working");
ejs 文件在目录views/board.ejs 中
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='../styles/style.css' />
</head>
<body >
<h1> <%= taco %> </h1>
<p> <%= something %> </p>
</body>
</html>
style.css 位于相对于 app.js 的 styles/style.css 目录中
p
color:red;
对于链接的 href，我已经尝试了所有可以想到的路径，包括相对于我的 localhost 相对于 app.js 相对于 board.ejs 指向的位置，甚至只是 style.css，但似乎没有一个有效。非常感谢任何建议。
【问题讨论】：
【参考方案1】：声明一个静态目录：
app.use(express.static(__dirname + '/public'));
<link rel='stylesheet' href='/style.css' />
【讨论】：
这似乎不起作用。为什么'/public'? 以及设置 app.use 会如何改变样式表的评估方式？我还尝试通过更改设置为href='/styles/style.css'，但没有任何运气
把它放在你的 app.router() 行上方。
您基本上是在与您的 .ejs 文件交谈，并说当您引用静态文件时，例如在上面的 link 标记中，根目录是您在 app 中定义的 public 文件夹.use，而不是整个应用程序的根目录。在这种情况下，链接标签的 href 中的“/”引用了 public 目录，而不是应用的根目录。【参考方案2】：
在 app.js 中：
you must first declare static directory
app.use("/styles",express.static(__dirname + "/styles"));
在 ejs 文件中：
<link rel='stylesheet' href='/styles/style.css' />
【讨论】：
这个答案很好！如果您想像我一样使用一些基于文件位置的相对路径，例如href='../../styles/style.css' 如果您有一些模板（例如每个文件中包含的 css/js 资源），您将会遇到问题。简而言之 - 当您使用“/bla/bla”（斜杠/bla/bla）时，您正在使用静态目录。很好。【参考方案3】：最近我正在处理同样的事情，但我的 CSS 无法正常工作。最后，我明白了诀窍。我的静态路径如下所示，
const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory = express.static(publicDirectoryPath);
app.use(staticDirectory);
我的文件夹结构就像
诀窍是快速访问只定义了静态路径，在我的情况下，CSS 不在公共文件夹中，所以它不起作用，突然我将 CSS 文件夹移动到我的公共文件夹中，仅此而已。工作精美。
以上示例仅适用于一个静态路径。对于多个静态路径，您可以使用下面的代码
const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const cssDirectoryPath = path.join(__dirname, '../src/css');
const staticDirectory = express.static(publicDirectoryPath);
const cssDirectory = express.static(cssDirectoryPath);
app.use(staticDirectory);
app.use('/css/',cssDirectory);
我的通用 HTML 文件是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<h1>this is index page</h1>
</body>
</html>
【讨论】：
嗨，const publicDirectoryPath = path.join(__dirname, '../src/public'); 是否可以缩短为const publicDirectoryPath = path.join(__dirname, '/public');？看起来这个路径是相对于 app.js 文件的，所以 ../src/ 将从 src 开始，上升到根目录，然后返回到 src？
不，我不这么认为【参考方案4】：
要为您的应用程序依赖项（如 css、img 等）设置入口点，请将以下行添加到您的 server.js（或曾经使用过的）中。
app.use(express.static(__dirname + '/'))
这告诉从 server.js 所在的当前目录获取 css 文件。因此，您可以在 html 文件中定义 css 的相对路径。
【讨论】：
【参考方案5】：使用 Express 4，您可以通过在 app.js 文件中使用以下内容轻松进行设置。
app.use('/static', express.static(path.join(__dirname,'pub')));
在您创建 require 常量并声明您的 express 应用程序之后，将其放在文件的早期。
它在路径对象的帮助下声明一个静态目录，让您拥有一个可以使用所有前端资源的地方。它还为它提供了一个可以在网站前面使用的虚拟目录名称 (/static)，而不是您在项目中看到的物理名称 (/pub)。
在您的模板中，您可以在脑海中执行类似的操作
<link rel="stylesheet" href="/static/css_bundle.css"/>
【讨论】：
以上是关于无法让样式表与 node.js 的 ejs 一起使用的主要内容，如果未能解决你的问题，请参考以下文章
无法在 ejs 文件 (node.js) 中读取 null 的属性“名称”
静态文件，带有 Node.js 和 Express 的样式表