Question

我正在尝试使用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.ejs相对于board.ejs的位置，甚至只是style.css，但似乎没有工作。任何建议都非常感谢。

Answer 1

声明一个静态目录：

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

<link rel='stylesheet' href='/style.css' />

Answer 2

app.js中的

：

 you must first declare static directory 

app.use("/styles",express.static(__dirname + "/styles"));

在ejs文件中：

<link rel='stylesheet' href='/styles/style.css' />

Answer 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>

Answer 4

要为应用程序相关性（如css，img等）设置入口点，请将以下行添加到server.js（或曾经使用过的行）中。

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

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

Answer 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一起使用

5 个答案: