无法让样式表与 node.js 的 ejs 一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13486838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't get stylesheet to work with ejs for node.js
提问by Loourr
I'm trying to make a simple server with node, express and ejs for the template. I've gotten the server to point to the page, load it, and am even able to generate other bits of code with the include statement. However for some reason the style sheet will not load.
我正在尝试为模板制作一个带有 node、express 和 ejs 的简单服务器。我已经让服务器指向页面，加载它，甚至能够使用 include 语句生成其他代码位。但是由于某种原因，样式表不会加载。
app.js
应用程序.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");
The ejs file is in a directory views/board.ejs
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>
and style.css is in a styles/style.css directory relative to app.js
style.css 位于相对于 app.js 的 styles/style.css 目录中
p {
color:red;
}
I've tried every path that I can conceive of for the href of the link including relative to where my localhost points relative to app.js relative to board.ejs and even just style.css but none seem to work. Any suggestions are greatly appreciated.
我已经尝试了我可以为链接的 href 想到的所有路径，包括相对于我的本地主机相对于 app.js 相对于 board.ejs 的位置，甚至只是 style.css，但似乎都没有。任何建议都非常感谢。
回答by chovy
Declare a static directory:
声明一个静态目录：
app.use(express.static(__dirname + '/public'));
<link rel='stylesheet' href='/style.css' />
回答by ahmed hamdy
in app.js:
在 app.js 中：
you must first declare static directory
app.use("/styles",express.static(__dirname + "/styles"));
in ejs file :
在 ejs 文件中：
<link rel='stylesheet' href='/styles/style.css' />
回答by king neo
Recently I was working with this same thing and my CSS was not working. Finally, I get the trick. My static path was like below,
最近我正在处理同样的事情，但我的 CSS 不起作用。终于，我明白了。我的静态路径如下所示，
const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory = express.static(publicDirectoryPath);
app.use(staticDirectory);
and my folder structure was like
我的文件夹结构就像
The trick is that express access only defined static path, in my case CSS was outside of public so it was not working and suddenly I move CSS folder inside my public folder and that's it. Works beautifully.
诀窍是快速访问只定义了静态路径，在我的情况下，CSS 在公共之外，所以它不起作用，突然我将 CSS 文件夹移动到我的公共文件夹中，就是这样。工作精美。
Above example was for only one static path. For multiple static path you can use the code in the below
上面的示例仅适用于一个静态路径。对于多个静态路径，您可以使用下面的代码
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);
And my generic HTML file is
我的通用 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>
回答by Shahid Hussain
To set the entry point for your application dependancies like css, img etc add below line into your server.js (or which ever being used).
要为您的应用程序依赖项（如 css、img 等）设置入口点，请将以下行添加到您的 server.js（或曾经使用过的）中。
app.use(express.static(__dirname + '/'))
This tells to get css files from current directory where server.js is present. Accordingly you can define relative path of css in html file.
这告诉从 server.js 所在的当前目录获取 css 文件。因此，您可以在 html 文件中定义 css 的相对路径。
