logo标签列表

无法让样式表与Node.js的ejs工作

node.jsexpressstylesheetejs
19

我正在尝试使用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，但似乎都不起作用。非常感谢任何建议。
5个回答
52

声明一个静态目录：

app.use(express.static(__dirname + '/public'));

<link rel='stylesheet' href='/style.css' />
似乎没有起作用。为什么是 '/public'？设置 app.use 会如何改变样式表的评估方式？我还尝试了将其设置为 href='/styles/style.css'，但无论如何都没有成功。 - Loourr
将其放在你的 app.router() 行之上。 - chovy
2
你基本上是在与你的 .ejs 文件交流，并告诉它当你引用静态文件时（例如上面的 link 标签），根目录是你在 app.use 中定义的 public 文件夹，而不是整个应用程序的根目录。在这种情况下，链接标签中 href 中的 "/" 引用的是 public 目录，而不是你的应用程序的根目录。 - mumush
12

在 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）时，你正在使用静态目录。很好。 - Combine
0
使用Express 4，您可以通过在app.js文件中使用以下内容轻松设置此功能。
app.use('/static', express.static(path.join(__dirname,'pub')));

在您创建所需的常量并声明Express应用程序后，将此代码放置在文件的早期位置。

它声明了一个静态目录，并借助路径对象让所有前端资源都可用。同时，还将其虚拟目录名（/static）赋予站点前缀，而非项目中实际名称（/pub）。

在您的模板中，可以在标签中执行如下操作：

    <link rel="stylesheet" href="/static/css_bundle.css"/>
0

最近我在处理同样的问题，我的CSS没有起作用。最终，我找到了解决方法。我的静态路径如下所示：

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory =  express.static(publicDirectoryPath);
app.use(staticDirectory);

我的文件夹结构是这样的

enter image description here

诀窍在于Express仅定义静态路径，对于我的情况，CSS位于public之外，因此无法正常工作。我突然将CSS文件夹移动到public文件夹中，问题解决了。非常完美。

上面的例子只是针对一个静态路径。如果有多个静态路径，您可以使用下面的代码。

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 目录吗？ - Barry Piccinni
不，我不这么认为。 - ANIK ISLAM SHOJIB
0

要为您的应用程序设置入口点，例如css、img等依赖项，请将以下行添加到您的server.js（或任何正在使用的文件）中。

app.use(express.static(__dirname + '/'))

这告诉我们从当前目录中获取css文件，其中包含server.js。因此，您可以在html文件中定义css的相对路径。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接