无法让样式表与 node.js 的 ejs 一起使用答案

【问题标题】：Can't get stylesheet to work with ejs for node.js无法让样式表与 node.js 的 ejs 一起使用
【发布时间】：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，但似乎没有一个有效。非常感谢任何建议。

【问题讨论】：

标签： node.js express stylesheet ejs

【解决方案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"/>

【讨论】：